在 HTML 表格上启用垂直滚动

Enabling vertical scroll on HTML tables

本文关键字：垂直 滚动 启用 HTML 表格      更新时间：2023-09-26

我正在创建一个表并使用javascript填充它。我想在表格中添加一个垂直滚动条，但仅限于数据，即我希望表格标题保持固定，即不包含在滚动中。

我只想使用javascript，CSS和有效的HTML5元素。在这个阶段，我想排除jQuery。关于这个话题已经有很多讨论，通常包括水平滚动条。我只对垂直滚动感兴趣，对我来说，滚动时标题列必须与表数据对齐至关重要。讨论和我试图实现这一目标，使我相信这是不可能的。如果不是这种情况，有人可以告诉我这是怎么做到的吗？

到目前为止，我已经进行了多次尝试。添加 

        table {
            display: block;
            height: 300px;
            overflow: scroll;
        }

导致整个表(包括标题和数据(的垂直滚动，但标题和数据是对齐的。添加 头 { 显示：块; } tbody { 显示：块; 高度：300像素; 溢出：滚动; }导致标题不滚动，但标题和数据列不再对齐。似乎正在发生的事情是标题列的宽度不再考虑数据列。

我尝试了许多其他方法，但没有成功。我根据标题和数据值的最大字段大小(以字符为单位(向标题和数据字段列添加相同的宽度值，取得了部分成功。使用这种方法，我可以使标题与大多数列的数据保持一致。但是，我不认为这是一个适当的解决方案，因为通常不可能，或者至少非常困难，以确定以em，px或mm为单位的值，该值将精确地容纳n个字符。

在我看到的讨论中，似乎我想要实现的是使用jQuery可以实现的。我还没有接受jQuery，但如果它可以轻松实现我想要的东西，那么可能是时候这样做了。谁能确认我想要的在jQuery中是否可行？

我很难相信我想做的事情不容易实现，因为我认为这对于任何适当的表格处理都是必不可少的。

也许不是您要找的答案，但一个相当简单的解决方案是将所有可滚动的行和列放在可滚动的div 中，并将页眉和页脚保留在该div 之外。

如果您愿意将列设置为固定宽度，则基本上可以制作两个表 - 一个用于标题，一个用于正文，然后只需在正文上设置滚动。

.HTML：

<table class="header">
    <thead>
        <td>Header</td><td>Header</td><td>Header</td>
    </thead>
</table>
<table class="body">
    <tbody>
        <tr><td>data</td><td>data</td><td>data</td></tr>
        ...
    </tbody>
</table>

和你的 css：

td, th{
    width:50px;
}
table.body{
     display: block;
     height: 300px;
     width:200px;
     overflow: scroll;
}

看到这个 jsFiddle.

相关文章：