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
The table must have a
thead element specified – this is the section that won’t scroll – and include the CSS class ‘scroll’ in the
table 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 ‘scroll-block’. The
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.