Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery plugin that makes large tables more usable by having the table header stick to the top of the screen when scrolling.
JavaScript
Branch: master

This branch is 79 commits behind jmosbech:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
demo
img
js
.gitignore
Gruntfile.js
StickyTableHeaders.jquery.json
default.htm
license.txt
package.json
readme.md

readme.md

StickyTableHeaders

So what's it good for? Well, let's say you want to display a long list of fairly uniform tabluar data, like stock exchange listings or sport statistics but you don't want your users to get lost in the data as they scroll down on the page.

StickyTableHeaders to the rescue: By applying the StickyTableHeaders jQuery plugin to the table, the column headers will stick to the top of the viewport as you scroll down.

Go ahead and try out a demo.

The code is based on this proof of concept.

Usage

  1. Download the source from /js/jquery.stickytableheaders.js
  2. Include it in your project
  3. Initialize the plugin:
$('table').stickyTableHeaders();

Tear down

To remove the plugin:

$('table').stickyTableHeaders('destroy');

Trigger an update

$(window).trigger('resize.stickyTableHeaders');

Options

The plugin supports one option, fixedOffset, which allows you to specify how much the sticky header should be offset from the top of the page. The fixedOffset parameter can either be a number or a jQuery object:

$('table').stickyTableHeaders({fixedOffset: $('#header')});

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.

Future Work

  • Writing a better readme :)

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)
  • border-collapse: collapse is not supported (issue #2)
  • Using the plugin together with tablesorter breaks in Internet Explorer 8

Browser Support

The plugin has been verified to work in:

  • Chrome 27
  • Firefox 20
  • Internet Explorer 8-10
  • Safari 5

NOTE: It does not work in Internet Explorer 7 (but it degrades nicely)

Something went wrong with that request. Please try again.