2

我有一张这样的桌子：

在此处输入图像描述

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

在此处输入图像描述

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

4

2 回答 2

4

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

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

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%;
}

工作小提琴

您可能希望跨浏览器进行此修复。然后请通过此链接。

于 2013-06-14T07:14:44.813 回答
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;
}

还添加thead在table

这是jsFiddle 文件

此外，您在表中多次使用了一个 ID，这不是有效代码。将其更改为类。

于 2013-06-14T07:20:23.730 回答