IE5+ ScrollTable technique

scrolling body, fixed column headers

demo: (scroll & stretch the browser window to see how it flows)

Header A	Header B	Header C
aaaaaaaaaaaaaaaaaaa	b	ccccccccccccccccccc
a	bbbbbbb	c
a	b	c
a	b	c
a	b	c
a	b	c
a	b	c
a	b	c
a	b	c
a	b	c
a	b	c
a	b	c

(more advanced demo, with percent height and fixed footers)

code:

<div style="overflow:auto; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%">
	<thead>
		<tr style="
		position:relative; top:expression(this.offsetParent.scrollTop);
		">
			<th nowrap>Header A</th>
			<th nowrap>Header B</th>
			<th nowrap>Header C</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr>
		<tr><td>a</td><td>bbbbbbb</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
		<tr><td>a</td><td>b</td><td>c</td></tr>
	</tbody>
</table>
</div>

notes:

Works on IE5.0+ only, thanks to the CSS expression. The styles on the DIV and the TR pretty much cover it.
Note: IE 5.0 seems to have a bug where this only works on 2nd and subsequent loads (otherwise, the headers scroll). (thanks for the note, Darby!)

Interestingly, Netscape has supported "overflow:auto" on the TBODY element since version 6, per the W3C's HTML 4.0 recommendation. Wonder if IE will ever support this part of the HTML 4.0 standard...

see Microsoft's approach to the problem: Out for a Scroll

support

As-is, etc. If you ask nicely, I may provide support via email.

credits/author

-Rob (@slingfive) Eberhardt, Slingshot Solutions
Use freely, but be honest about it. I just ask for credit.

Ť slingfive.com