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.

How to use it:

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.