纯CSS实现的表格滚动条效果

纯CSS实现的表格滚动条效果，表格头不滚动，表格体滚动，一下只列出达到效果的最基本内容，没有样式的修饰

html:

<table>
<thead>
    <tr>
        <th><a href="#">Header 1</a></th>
        <th><a href="#">Header 2</a></th>
        <th><a href="#">Header 3</a></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>

    ……

</tbody>
</table>

css：

table {
    width: 756px;
}

thead  tr {
    display: block;
}
               
tbody {
    display: block;
    height: 100px;
    overflow: auto;
}

thead th {
    width: 200px;
}

thead th + th {
    width: 240px;
}

thead th + th + th {
    width: 316px;
}

tbody td {
    width: 200px;
}

tbody td + td {
    width: 240px;
}

tbody td + td + td {
    width: 300px;
}

有个问题，此方法需要设置每列的宽度，否则会以最小宽度靠左紧贴。

效果如图（以上代码没有设置美化样式，样式较下图简陋）：

参考：http://www.sharejs.com/js/table/10440