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:
As you can see the whole thing is build with div tags that have classes of "row" and "cell". The CSS declarations look like this:
Now let's step through it. The cell, row, and caption definitions are pretty straight forward. Just tell the div how you want it to display as another element type. The class "htabl" is critical. The margin sets the primary position and the right padding adjusts it to account for the scroll bars that will be in the main structure. The cells inside the "htabl" class are styled in the normal way to look however you want the headings to appear.
Now we come to the biggie; "wrapper" is the the glue that makes the whole thing work and its properties are critical. The max-height must be defined.The overflow-y is a no brainer, but the overflow-x is important to avoid horizontal scrollbars. The width must be exactly 20 pixels more than the width of "htabl" to allow for the scroll bars. The margin gives the main table the same general positioning as the headings, but the the 4 pixel padding adjustment is necessary to get precise alignment due to the fact that the two elements are not the same width.
The data table gets declared with a width equal to the headings and we are good to go... ALMOST! We still have one problem to solve.
Left on their own table cells will set width and height to match the data, and one long piece of data can mess up the whole thing in our table. The heading cells and the data cells are not bound to each other the way they are in a regular table. Therefore we have to enforce some kind of binding in the CSS. We have 3 additional rules based on the value of a title attribute, to set the widths. Notice that the heading cells and the cells in the second row have the title specified. That locks the widths. It is not necessary to add title to all the cells. The browsers will size the columns based on whatever explicit instruction is given. While using the title that way is a little unusual, it is still within the standards, and a little creativity within standards is generally a good thing. One row with explicit widths will be used as the template for the entire table.The total width of my cells is 390px in a table that has a max width of 400px. It is always a good idea to have that little bit of slack. When thing get too tight something like appending text or modifying a border can result in oversizing the content and the results are unpredictable and generally not good. The browsers will try to compensate and make sense out of stupid coding, but you are playing a fool's game. Crap code at some point will return crap multiplied; generally about two hours before you are scheduled to present the final version of the project.
There are some additional examples of using divs as cells in this article at COBOLdinosaur.com