Question

我一直在努力解决这个问题。假设我有一个包含许多行和多列的表（垂直和水平溢出页面）。我想修复第一行（thead）。

捕捉：我希望垂直和水平滚动条始终可见。即，我不希望用户必须水平滚动才能找到垂直滚动条，反之亦然。

我能想到的最好的方法是将thead和tbody分成两个单独的表，同步滚动，但这会产生对齐和匹配单元格宽度的问题，所以我宁愿不这样做。

你会如何解决这个问题？

Answer 1

无需将表拆分为2个表。您可以尝试以下使用一个表但仍冻结标题的内容。

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px;overflow:auto;display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>

Answer 2

我使用jquery datatables插件，这里可以看到你想要的一个例子http://www.datatables.net/examples/basic_init/scroll_xy.html

Answer 3

对任何想要达到类似效果的人：

使用width:100%;和overflow:auto;

将表格包裹在div中

复制表格的标题部分，然后创建一个新表格。位置这个表绝对是！（position:absolute;）

将标题表放在与真实表相同的div中。（它应该完全适合原始标题部分。）

使用jQuery来管理div的滚动并将标题粘贴到位......

jQuery(document).ready(function() {
    jQuery('#tableDiv').scroll(function() {
        jQuery('#copiedHeaderTable').css('top', jQuery(this).scrollTop());
    });
})

这个解决方案当然会对您的要求做一些假设，但有一些优点（简单性是主要的）。

编辑要确保匹配单元格宽度，请在div中包装所有内容并在克隆之前手动设置每个div的宽度：

jQuery('#headerRow th div').each(function() {
    jQuery(this).css('width', jQuery(this).parent()[0].offsetWidth+'px');
});

可滚动的表格想法（棘手）

3 个答案: