28 7 / 2009
Fixed Header Table using jQuery
This is yet another jQuery plugin to provide fixed headers for tables. It differs in the way that it does not require any odd html table semantics. It just needs a TABLE tag with THEAD and TBODY to work its magic.
How it works?
Simple. It takes a TABLE, pulls the THEAD and TBODY out of it and puts them into two separate DIVs. Now, the DIV which THEAD (header-div) goes is overflow restricted. The DIV the TBODY (content-div) goes to allows vertical overflow. That’s it. Since the content-div can have a vertical scroll bar, the header-div cant. We have our table with fixed header. Thats it. The plugin takes care of aligning the columns. So, as a plugin user, you dont have to worry about the alignment.
Now, the gotchas. For extremely large tables (thousands of rows and tens of columns), you will see a delay in the page load, because the plugin rearranges the DOM. This doesnt mean that this plugin cant be used for large tables. There is no strict definition of “large”. So, dont hesitate to try it on a large table.
