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.
- Build and style your table inside a div that has a limited height and "overflow" style at auto
- Include the function above in your scripts
- 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 |