1

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

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

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

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

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

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

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

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

4

2 回答 2

2

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

于 2013-10-01T13:01:26.107 回答
0

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

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。

于 2013-10-01T13:11:54.247 回答