jQuery Plugin For Fixed Table Headers And Footers - FixTableHeader

jQuery Plugin For Fixed Table Headers And Footers - FixTableHeader

FixTableHeader is a small and easy-to-use jQuery plugin which makes single or multiple headers and/or footers of your large html table always be visible as you scroll down and up.

1. To get started, first you need to load both jQuery library and the jQuery FixTableHeader plugin's script in the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jQuery.fixTableHeader.js"></script>

2. Wrap your html table into a container with a fixed height.

<div id="demo" class="container">
  <table>
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      ...
    </tbody>
    <tfoot>
      <tr>
        ...
      </tr>
    </tfoot>
  </table>
</div>
.container {
  height: 400px;
  width: 100%;
  overflow: auto;
}

3. Call the function to make the thead sticky on table scroll.

$('#demo').fixTableHeader();

4. The JavaScript to make both thead and tfoot sticky on table scroll.

$('#demo').fixTableHeader({
  fixFooter: false
});

5. The JavaScript to make the tfoot sticky on table scroll.

$('#demo').fixTableHeader({
  fixHeader: false,
  fixFooter: true
});

This awesome jQuery plugin is developed by Jo-Geek. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 21.12.2017
  • Source