Table with fixed headers with CSS - html

Question

I am trying to implement a table with fixed headers using the concepts from this page:
http://www.imaputz.com/cssStuff/bigFourVersion.html#
When I implemented the CSS from that page, my table columns are not aligned with the table headers.
HTML:
<div id="tableContainer" class="tableContainer">
<table class="sortable" border=1 frame=void cellspacing=0 cellpadding=4>
<thead class="fixedHeader">
<tr>
<th id="Column1" align=center valign=bottom>Column 1</th>
<th id="Column2" align=center valign=bottom>Column 2</th>
<th id="Column " align=center valign=bottom>Column 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td align=right>ABCD</td>
<td aligh=right>XY</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>BAR</td>
<td aligh=right>BAZ</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>BAR</td>
<td aligh=right>BAZ</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>CD</td>
<td aligh=right>FOO</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>BAR</td>
<td aligh=right>BAZ</td>
<td aligh=right>12345678</td>
</tr>
</tbody>
</table>
CSS:
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 150px;
overflow: auto;
width: 300px
}
html>body div.tableContainer {
overflow: hidden;
}
div.tableContainer table {
float: left;
}
Here is that on jsfiddle:
http://jsfiddle.net/softvar/yL84C/
I was able to 'fix' this by explicitly setting the cell size:
CSS:
* {
box-sizing: border-box;
}
th, td {
width: 100px;
}
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 150px;
overflow: auto;
width: 300px
}
html>body div.tableContainer {
overflow: hidden;
}
div.tableContainer table {
}
Here is that one jsfiddle:
http://jsfiddle.net/cFr38/
But what I really want is the cells to be automagically sized based on the data (which is what my table does now without the new CSS)? How can I do that?