New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/sticky-table-headers/
Sticky Table Headers
Download Demo
Sticky Table Headers is a jQuery plugin that makes large tables more usable by having the table header stick to the top of the screen when scrolling.
Browser Support
The plugin has been verified to work in:
Chrome 35
Firefox 29
Internet Explorer 8-11
Safari 5
Installation
The best way to install is using Bower:
bower install StickyTableHeaders
Alternatively, you can download the latest version from jquery.stickytableheaders.min.js.
Usage
Initializing the plugin is pretty straight forward:
$('table').stickyTableHeaders();
Tear down
To remove the plugin:
$('table').stickyTableHeaders('destroy');
Trigger an update manually
$(window).trigger('resize.stickyTableHeaders');
Options
You can initialize the plugin with an options map to tweak the behavior. The following options are supported:
fixedOffset
A number or jQuery object specifying how much the sticky header should be offset from the top of the page:
$('table').stickyTableHeaders(fixedOffset: $('#header'));
scrollableArea
A DOM element or jQuery object. Allows you to overwrite which surrounding element is scrolling. Defaults to window. Check this demo for an example
As described in pull request #33 responsive pages might need to re-initialize the plugin when the user resizes his browser. This is can be done by calling the plugin with the new options:
$('table').stickyTableHeaders(fixedOffset: [new-offset]);
Confused?
If any of this is confusing, please check out the /demo folder. There are a couple of examples in there. E.g. you can see how to use it with Twitter Bootstrap.
Known Issues
Internet Explorer: You need to set the padding of the <th>s explicitly in the css in order to make the plugin work
Internet Explorer: Adding horizontal margin to the table causes the header to be misaligned when scrolling. (Issue #10)
Using the plugin together with tablesorter breaks in Internet Explorer 8