Order of the Bath

When 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.

This entry was posted on 8 Nov 2005 at 21:22 by Rick and is filed under Browsers, Technical. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.