Create Fixed HTML Table Header Footer – jQuery Fix Table Header Plugin

In this post I am going to share a simple jQuery plugin to create fixed HTML table header and/or footer. It is a jQuery plugin to fix header or footer row in a table on user scroll.This plugin does exactly what it says. Fixing the headings and/or the footers in a HTML table is made easy by this plugin. With the help of this plugin you can easily display user mark-sheet with fixed header subjects list with fixed footer total numbers. see example.

jQueryFixTableHeader Features:-

• fix header and/or footer with options
• no alterations to existing table needed, just wrap it around a container and call this plugin.
• no dynamic element created for fixing header and footer, this just uses the existing elements (th and td)
• perfect table layout not needed, just works with few tr in iside a table.
• Supports fixing multiple rows in header/footer by using the thead/tfoot tag. Any number of rows within these tags will be fixed
• Tables with horizonal scrolling(responsiveness) is supported
• Super light: just a 2kb plugin

Fixed HTML Table Header Footer

Libraries

To integrate this plugin on your website, first you need to include latest jQuery core library and with jQuery FixTableHeader plugin’s library on page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jQuery.fixTableHeader.js"></script>

<div id="tableContainer" style="height:400px; overflow: auto;">
  <table>
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      ...
    </tbody>
    <tfoot>
      <tr>
        ...
      </tr>
    </tfoot>
  </table>
</div>

td.fth-header,th.fth_eader,td.fth-footer{
      border-top:none;
      border-bottom:none;
   }

$(function() { 
 //Fixed Header Footer  
 $('#tableContainer').fixTableHeader({ fixHeader:true,fixFooter:true });
 
 //Fixed Only Header
 $('#tableContainer').fixTableHeader({ fixHeader:true,fixFooter:false });
 
 //Fixed Only Footer
 $('#tableContainer').fixTableHeader({ fixHeader:false,fixFooter:true });
});