javascript - 可滚动表的想法（棘手）

Question

我已经为此苦苦挣扎了一段时间。假设我有一个有很多行和很多列的表格（垂直和水平溢出页面）。我想将第一行（头部）固定到位。

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

我能想到的最好的办法是将 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 数据表插件，你想要的一个例子可以在这里看到http://www.datatables.net/examples/basic_init/scroll_xy.html

Answer 3

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

width:100%;用和将表格包裹在 div 中overflow:auto;。

复制表格的标题部分并创建一个包含该标题的新表格。将此表定位为绝对！( 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');
});