Bootstrap Compatible Sticky Table Header Plugin - Table Fixed Head

Table Fixed Head is a really simple jQuery plugin that makes your long table able to vertically fix the thead when scrolling down.

How to use it:

1. Load jQuery library and the jQuery table fixed head plugin at the end of the document to improve the page load speed.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.michiweber.table-head-fixed.js"></script>

2. Add the 'table-fixed-head' class to your html table. Note that the html table must have thead and tbody elements.

<table class="table table-fixed-head">

3. Style the sticky table header in the CSS.

table.table-fixed-head .table-fixed-head-thead {
  border-bottom: 1px solid #dddddd;
  background: #fafafa;
  color: #222;
}

4. Config the plugin via html5 data attributes on table element.

• data-table-fixed-head-trigger: top offset to trigger the plugin
• data-table-fixed-head-top: top position to place the sticky header

<table class="table table-fixed-head"
       data-table-fixed-head-trigger="0" 
       data-table-fixed-head-top="0"
>

5. You can also pass the options as an object on init.

$('table').tfh({
  trigger: 0,
  top: 0
});

Change log:

•  Bugfix: Too much calls of resize event killed browser

---

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