Jun 11, 2009

JQuery: Scrollable Table with Frozen Headers

After much difficult searching to no avail, I finally have completed a jQuery based process to create a scrollable table with fixed headers. The following code requires the header rows to be within a "thead" tag, the table body in a "tbody" tag and the entire table in a tag with the "overflow" style set to "auto" or "scroll".

This script creates a new table cloning the "thead" section and attaching it to the absolute top of the containing element so that it does not move when the containing element is scrolled.

As always I release this script under Creative Commons license, and is compatible with all browsers which are compatible with jquery except for Firefox 2.0 (a few minor alignment issues i plan to fix when i have time).

EDIT: Code Move to Snipplr

Tested and working with:

  • Internet Explorer(Win) (6.0, 7.0, 8.0)
  • Firefox(Win, Linux) (3.0)
  • Safari(Win, Mac) (3.0)
  • Chrome (Win) (2.0)
  • Opera (Win) (9.6)

Tested and having issues with:

  • Firefox (All) (1.0, 1.5, 2.0)

Edit:

It was brought to my attention that I forgot to include an example. So here's a quick and dirty one. I've tried to mark it clearly in the source so it will be easy to grab.

  1. Build and style your table inside a div that has a limited height and "overflow" style at auto
  2. Include the function above in your scripts
  3. When document is "ready" call "scrollableTable()" function with the container of the table (".scrollContainer") and, if you choose, the class name to be applied to the new header as arguments.

I will try to type up some better documentation on this and clean up the code a bit, but in the mean time please let me know of any issues you may run into so that I can fix them soon.

Column 1 Column 2 Column 3 Column 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
data 1 data 2 data 3 data 4
Update 10/27/09:
This project has fallen by the wayside due to lack of time and a redesign of the site I needed this script for anyway. I may get back to it later, but in the mean time, I've moved the code to Snipplr (link above). Feel free to further comment there. I would be happy to include any contributions/bug fixes anyone may have or link to a derivative work anyone else may be working on.