jQuery Plugin For Sticky Table Headers

jQuery Plugin For Sticky Table Headers
File Size: 60.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

StickyTableHeaders is a lightweight and useful jQuery plugin that makes your table thead elements sticky as the page scrolls down. It is good for a long list of fairly uniform tabular data.

Basic Usage:

1. Include jQuery library and StickyTableHeaders plugin before </body> tag of your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script src="../js/jquery.stickytableheaders.js" type="text/javascript"></script> 

2. Markup html structure

<table>
<thead>
<tr>
<th colspan="3"> Companies listed on NASDAQ OMX Copenhagen. </th>
</tr>
<tr>
<th> Full name </th>
<th> CCY </th>
<th> Last </th>
</tr>
</thead>
<tbody>
<tr>
<td> A.P. Møller... </td>
<td> DKK </td>
<td> 33,220.00 </td>
</tr>
<tr>
...
</tr>
...
</tbody>
</table>

3. Initialize the plugin

<script type="text/javascript">

$(document).ready(function () {
$("table").stickyTableHeaders();
});

</script>

More example:

Change log:

v0.1.11 (2014-05-29)

v0.1.10 (2014-05-28)

  • bug fixed.

v0.1.9 (2014-04-05)

  • bug fixed.

v0.1.7 (2013-11-22)

  • emitting event after cloning header.

v0.1.6 (2013-09-19)

  • updated to the latest version

v0.1.4 (2013-08-06)

  • fixing jshint errors and minifying

For more Advanced Usages, please check the demo page or visit the official website.