Tables should have scrollable bodies. With DIVs (and most other block elements) you can simply set their height/width/overflow, but for some reason tables were left out in the cold. A simple solution for this is to wrap your table in a DIV or SPAN tag and call it a day. (in fact I’ve been using that trick for years on this site - check out the “NEWS / WHAT’S NEW @ Kered.org” section of my front page) But that will also scroll the table headers, something I wouldn’t want displaying actual tabular data.So what to do? Fire up Bluefish and get to work!

Demo

A pretty basic table:

Note that both table header widths and table data widths shape the sizes of the individual columns. (and of course that the table headers remain static during a scroll)

Solution

I’ve seen other attempts at this before, but a common problem has been how to implement this without getting the implementation intertwined into the table output itself. This would allow for several benefits, including:

• Little to no editing of (potentially) large existing code bases already generating tabular HTML
• No special requirements on the code generating HTML data (such as using some new table API)
• Allowing code to interact peacefully with other table manipulation scripts
• Future-proofing your code for an easy switch to alternative implementations
• Graceful downgrade for clients who do not support Javascript or CSS

So a big part of my effort was in retaining the classic table structure:

The actual table implementation is dynamically rewritten when the page in loaded, with the call: