2

我有一张简单的桌子。我想使用简单的 CSS 和我的大脑制作一个可滚动的tbody.

我知道这个主题被讨论过很多次，但我没有看到其他问题的解决方案。

如果tbody是可滚动的，则滚动出现在右侧，tbody在这种情况下，会使我的表格和单元格变形。

示例 -> JsFiddle（我避免发布巨大的 HTML 代码和 CSS 代码）。

当滚动条出现时，您会看到tbody单元格变形。

我有两个问题：

  1. 为什么表格单元格变形？因为table-layout: fixed？

  2. 为什么如果我放置 .ov { height: 30%; overflow: auto; }而不是.ov { height: 30px; overflow: auto; }，滚动条不会出现并且 tbody 高度变满。

谢谢你。

4

2 回答 2

1

好吧，我需要处理的一些表也有同样的问题，但在 IE 中它们有点棘手。使用相同的代码，我在 jsfiddle 中添加了两种 CSS 样式，并在其中一个引用我的新 css 类的 HTML 元素中添加了一个类。这是链接：jsfiddle

这是我添加的代码（请原谅蹩脚的 css 类名）。

thead td { width: 49px; }
.extra { width: 67px; vertical-align: top }

我把这个类放在标题部分的第三列

<td class="extra">Column 3</td>

我在 FireFox（最新版本）中对此进行了测试。唯一的问题是第三列的标题字段更大，因为它包括滚动条的宽度。

希望有帮助。

于 2012-08-22T07:00:39.327 回答
0

这是很正常的。卷轴出现在您的tbody. 但是滚动条需要一些空间来显示它的按钮，这就是它推动你的单元格的原因。table-layout: fixed在这里没有任何作用。您可以尝试从小提琴中删除该行。最好尝试一些 JavaScript 滚动条解决方案。

于 2012-08-19T09:26:28.590 回答