带有CSS的固定标头的表

Question

我正在尝试使用此页面中的概念实现具有固定标头的表：

http://www.imaputz.com/cssStuff/bigFourVersion.html#

当我从该页面实现CSS时，我的表列未与表头对齐。

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;
}

这是关于jsfiddle：

http://jsfiddle.net/softvar/yL84C/

我能够通过明确设置单元格大小来“修复”这个：

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 {
}

这是一个jsfiddle：

http://jsfiddle.net/cFr38/

但我真正想要的是基于数据自动调整大小的单元格（这是我的表现在没有新CSS的情况）？我怎样才能做到这一点？