html - Bootstrap 3 具有固定高度和标题和列宽的表格

Question

我想要一个具有以下功能的表格:

• 固定标题，
• 固定高度(可见滚动条)
• 3 个固定宽度的列(一个大列和两个窄列)。

我开始使用:

tbody { display:block; overflow:auto; height:100px; }

要至少得到固定的高度但是这条规则会挤压左边的 table (如果有必要我会提供截图)。

该表包含在 Bootstrap 3 列中。

这是一个例子 http://jsfiddle.net/PGEdK/

有什么想法吗？提前致谢。

Answer 1

这是 JS FIDDLE DEMO就像您预期的那样工作。 Acutally，你的tbody风格没有问题。您只需要为您的 th 和 td 添加更多样式。所以，你的最终代码将是这样的:

tr {display: block; }
th, td { width: 300px; }
tbody { display: block; height: 100px; overflow: auto;} 

如果你看一下 fiddle ，你会注意到我用 tr 包裹了 th 这样我就可以在给 display:block 样式后给 th 适当的宽度tr。所以，如果你想定位只包装 th 的 tr，你也可以这样做。

出于演示目的，我用 .tablecontainer 类包装了表格，这样我们就有一定的宽度可以使用。