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 |
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.
Tags:
design
,
fixed header
,
header
,
jquery
,
scroll
,
scrolling
,
stationary
,
table
6 comments :
do you have any examples?
..and is it much different than the plugin that's available on the jquery web site?
also, forgive me, but I'm not sure how to call this. Any examples would be really great. I've been searching and haven't come up with much, just like you...except for your post, which looks promising.
Got a simple example up. Will work on updates and better documentation when I get time.
Very nice! I've been hunting around for something like this. Most of the other code I've seen is way too complex. I do think there are a couple of small geometry bugs though. In Firefox, I noticed that the left border of the first column gets cut off. It does this regardless of if there is a vertical scrollbar or not.
In IE6, if you need to include a vertical scrollbar it forces a horizontal scrollbar as well, even if it really does not need to.
I can see both of these behaviors on your web page.
I take that back. The bizarre behavior seems to be related to the browsers themselves. I still like to know how to counteract it though.
Post a Comment