Submitted by: COBOLdinosaur on 2012-09-01 11:24:32
Member Site: http://COBOLdinosaur.com
A problem for developers doing sites where a lot of tabular information must be displayed is that the data tables get to big for the page and the user has to scroll the data. When they do that, the headings of the table scroll off the screen. The solution would be to have just the body of the table scroll with the headings remaining fixed. Unfortunately it is not easy to implement and most attempts end up with a page that is easily broken. The best still don't look or work quite right.
Over the years I have come up with a few hacks that sort of do the job but all the solutions have limitations and are a lot of nasty work to build and maintain. For the most part, they are one offs to fix a single problem. What I have come to now is the best attempt yet, and it can be generalized for just about any situation.
There are a few extra borders in there so you can see how the structure is put together. They are not necessary and should be removed before deployment to production.
Some will consider this cheating, because it is not really a table. It is a structural widget built with divs. I don't consider it a cheat. The div is intended to be used for structure definition. That is why it can support so many display options and other CSS properties. This is part of the HTML: