使用 Html/CSS 滚动表

Question

我有一张这样的桌子：

我想要做的是在验证高度或一定数量的行后使其滚动，保持标题 Bike - Car - Truck 可见。我已经进行了足够多的 Google 搜索，看到了类似 one 的其他 Stack Overflow 帖子。我也在该帖子的接受答案中尝试了 jsfiddle.net 解决方案。但它使我的表格看起来像这样：

这是我的html 代码的链接。可能看起来不整洁，我刚刚粘贴了表格数据以查看滚动是否有效。这个是tablestyle.css。我认为 public.css 文件与这种失真无关。如果它很重要，那么我也会上传它。感谢任何线索/帮助！

Answer 1

我添加了以下 css 来修复它：

在 HTML 中，我用 thead 包裹了第一个 tr（不是必需的，但推荐）

CSS：

table.list {
    width:100%;
}
table.list thead {
    display: table;
    float: left;
    width: 100%;
}
table.list thead th {
    text-align: center;
}
table.list tbody {
    float: left;
    width: 100%;
}
table.list tbody tr {
    display: table;
    width: 100%;
}
table.list th, td {
    width: 25%;
}

Working Fiddle

您可能希望跨浏览器进行此修复。那么请通过这个link。

Answer 2

试试这个

我已经改变了你的一些 css

tbody#scrolling { height: 120px; overflow-x: hidden; overflow-y:scroll; display: block;}
td#vehicles, th#vehicles {  border: 0 none; height: 30px; min-width:153px; }
thead{
    width:100%;
    display:block;
}

还在table 中添加了thead

这里是jsFiddle File

另外，您在表格中多次使用了一个 ID，这不是有效代码。把它改成类。