The Quest for Semantic Scrolling Tables
At the start of this week, I was hunting around the internet for a scrolling table solution with the following requirements:
- No extra markup
- Cross-browser including IE
- Ideally just HTML and CSS
- unfortunately the current version is built on top of prototype, but if you feel like adapting it to not use any external libraries, be my guest.
The table must have a
thead element specified - this is the section
that won’t scroll - and include the CSS class ‘scroll’ in the
element. To have an enforced size for the table (if you want it to
scroll, you need this), add something to your CSS specifying height for
elements with the class ‘scroll-block’. As long as prototype and the
scroll_table js files are included, the tables will automatically
become scrollable as the page loads.
How it Works
The original table is put into a new div which has the class
thead from the table is duplicated into a new
table above that div element, and the original table’s margin-top is set
to a negative value to hide its header. Then each new header cell has
its width set inline to force the columns to line up. It will fix these
up whenever the browser window is resized, too.
One Minor Issue
Left borders on the table disappear - so if that is important, just add
it to the
div.scroll-block element via CSS.