Here's another version. This one worked in all browsers I tested (even MSIE 5.5), and can be used in a fluid layout. I know 3 disadvantages:
1) The layout assumes that the scrollbar width is less than 20px. Windows users can change this in the OS preferences, and I don't know what widths other OSs use. You can provide much more space for the scrollbar just in case, but instead risk an ugly gap between the tables and scrollbar.
2) The HTML uses two separate tables, which is a bit ugly. I'd probably start with a single table and make the HTML changes below with javascript.
3) The tables require explicit widths (so that you can make space for the scrollbar). Percent can't be used.
CODE
<style type="text/css" media="screen">
div#container {
position: relative;
width: 220px; /* extra 20px used to account for the scrollbar of div#scroll */
border: 1px solid #000;
}
div#scroll {
overflow: auto;
height: 200px;
}
table#head {position: absolute; top: 0; left: 0;}
table#body {margin-top: 1.6em;} /* height of table#head */
div#container table {
width: 200px; /* 20px less than div#container */
color: #000;
background: #fff;
}
div#container th, div#container td {
font-weight: normal; /* prevents TH width rounding(?) error in some browsers */
border: 1px solid #000;
}
</style>
<div id="container">
<table id="head">
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</table>
<div id="scroll">
<table id="body">
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
</div>
</div>