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

0 419

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>

HTML

Invoking the plugin The table should be wrapped inside a container div with overflow:auto and a fixed height if necessary.

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

 

CSS

The plugin adds the classes fth-header and fth-footer to the th’s and td’s to all the detected headers and footers respectively. You can use this classes to manipulate their appearance in your CSS.

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

JS

Finally call the plugins on table container’s id like this

$(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 });
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

Leave A Reply

Your email address will not be published.