Question

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

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

到目前为止，我做了很多尝试。添加

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

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

我尝试了许多其他方法但没有成功。通过根据字符和数据值的最大字段大小（字符）向页眉和数据字段列添加相同的宽度值，我获得了部分成功。通过这种方法，我可以获得标题以与大多数列的数据对齐。但是，我不认为这是一个适当的解决方案，因为通常不可能，或者至少很难确定em，px或mm中的值，它将精确地保存n个字符。

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

我发现很难相信我想做的事情不容易实现，因为我认为这对任何适当的表格处理至关重要。

Answer 1

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

Answer 2

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

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。

在HTML表上启用垂直滚动

2 个答案: