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单独使用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更容易实现。

水平滚动Div内的静态表头

1 个答案: