Scrolling tables and CSSWhen asked by a colleague on the Cornwall OPC Project for a way to present tabular data so that the headers remained fixed “like Freeze Panes in Excel’ I started to look at what was around. It is not easy, firstly because of quirks with the browsers and secondly because CSS doesn’t seem to cater for it properly. For a narrow table which just requires vertical scrolling, this seems to work ok.
div#tbl {
height: 300px;
width: 60%;
background: #ffc; /* this is relevant */
overflow: auto; /* triggers the scrolling in IE */
}
html>body div#tbl {
overflow: hidden; /* don't do it this way in other browsers */
}
div#tbl thead th {
position: relative; /* fix the top line of the scroll for IE */
background: #ffc; /* to hide the scrolling content */
top: -2px; /* need to move the header up a bit to
complete the illusion */
}
div#tbl tbody { /* both items ignored by IE */
max-height: 270px; /* adjust to lose bottom scroll bar */
overflow: auto; /* Triggers the scrolling */
}
div#tbl td:last-child {
padding-right: 20px; /* prevent scrollbar from hiding
last cell contents */
}
This is for a strict mode page with a table containing a thead with th elements and a tbody with td elements all surrounded by a div id=’tbl’.
If the table gets wide, however, and needs sideways scrolling, there seems to be no solution which works adequately. There is a way to do it in IE using quirks mode but the location of the fixed header in Mozilla browsers makes it impossible.
Webmaster