水平滚动div内的静态表头

Question

我在 div 中有一个表格。 div 可以水平和垂直滚动。当我向下滚动表格时，我需要表格标题在顶部是静态的。

<div id='result' style='overflow:scroll;width:173px;height:115px;'>
<table>
    <tr>
        <th>Head1</th><th>Head2</th><th>Head2</th><th>Head3</th>
    </tr>
    <tr>
        <td>column1</td><td>column2</th><td>column3</td><td>column4</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</th><td>column3</td><td>column4</td>
    </tr>

</table>

jSfIDDLE

Answer 1

我能想到的仅使用 css 和 html 的唯一方法是将表格拆分为标题表和内容表，并将内容表包装在可滚动的 div 中：

html：

<table class="the_Table">
    <tr class="static_header">
        <th>Head1</th>
        <th>Head2</th>
        <th>Head2</th>
        <th>Head3</th>
    </tr>
</table>
<div id='result' class="scrollable">
    <table class="the_Table">
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
    </table>
</div>

css:

.the_Table {
    width:300px;
    text-align:center;
}
.scrollable {
    position:relative;
    overflow:scroll;
    height:115px;
    width:330px;
}

实时示例：Fiddle

也可以使用 Javascript 轻松实现，使用 jQuery 更容易实现。