jQuery Sticky Table Headers plugin

Downloads in past


933.0.05 years ago7 years agoMinified + gzip package size for jquery-stickytable in KB


jQuery Sticky Table Headers
Make your table headers sticky

This is a version of the sticky table code originally written by Terry Munn, wrapped in a jquery plugin to make it more reusable. I also added some new options and functions.

Installing / Getting started

Install via NPM:
npm install --save jquery-stickytable 

Include jQuery(>=1.12.4) and jquery-stickytable in your head:
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-stickytable.min.js"></script>

and the css:
<link rel="stylesheet" type="text/css" href="path/to/jquery-stickytable.css">

Files can be found in dist folder:
├── jquery-stickytable.css
├── jquery-stickytable.js        (UMD)
├── jquery-stickytable.min.js    (UMD, compressed)
└── jquery-stickytable.esm.js    (ES Module, includes css)


Load stickyTable on your table:

By default just the header of the table (eg. the thead) is sticky. Biaxial headers are possible — this is for situations where both horizontal and vertical headers are needed. To enable, just wrap the first element in each tbody row in a th instead of a td:
    <th>Sticky column</th>
    <td>value A</td>
    <td>value B</td>


| Option | Description | | ------------- | ------------- | | copyTableClass | When true copies any classes on the target table to the sticky table. Default is true. | | copyEvents | When true copies any events on the target table to the sticky table. An example would be if there was a click event on a th element in the thead to do sorting, this would carry over to the sticky column header th. Default is false. | | overflowy | When true adds an overflow-y class to the sticky table wrapper (ie. sticky-wrap class). This means the table will scroll vertically and only be as tall as it's parent div (see .sticky-wrap.overflow-y in css). Default is false.|


Methods cannot be called until the stickyTable plugin has been initialized on the element.


Completely removes sticky table classes and elements and destroys the instance.


The sticky headers have default colors set, but you can override this css:
.sticky-wrap .sticky-intersect th {
    background-color: #666;
    color: #eee;

.sticky-wrap th {
	background-color: #666;
	color: #eee;


  • If target element is not a table.
  • If plugin has not been initialised when calling a method
  • If method is private
  • If method does not exist


  • http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
  • http://tympanus.net/Tutorials/StickyTableHeaders/