可滚动表的想法（棘手）答案

【问题标题】：Scrollable table ideas (tricky)可滚动表的想法（棘手）
【发布时间】：2011-06-28 19:13:44
【问题描述】：

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

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

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

你会如何解决这个问题？

【问题讨论】：

你看过this吗？你可能会从中得到一些想法。

标签： javascript html css html-table scrollable

【解决方案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>

【讨论】：

感谢 Sime Vidas。我错过了。看起来插件会是一个更好的选择。
我什至不明白这是在做什么。我的中有 25 个 ... 这将第一个固定到位，然后将其他 24 个推到桌子后面。你在什么浏览器上测试过这个？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

使用width:100%; 和overflow:auto; 将您的表格包装在一个div 中。

复制表格的标题部分并创建一个包含该标题的新表格。将此表定位为绝对！ (position:absolute;)

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

使用 jQuery 管理 div 的滚动并将 header 固定到位...

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');
});

【讨论】：