使用 Bootstrap 3 具有固定高度、标题和列宽的表格答案

【问题标题】：Table with fixed height and header and colum width with Bootstrap 3使用 Bootstrap 3 具有固定高度、标题和列宽的表格
【发布时间】：2014-01-09 10:34:33
【问题描述】：

我想要一张具有以下功能的桌子：

固定标题，
固定高度（带有可见滚动条）
3 个固定宽度的列（一个大列和两个窄列）。

我开始使用：

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

至少要获得固定高度，但此规则会挤压左侧的表格（如有必要，我将提供屏幕截图）。

该表包含在 Bootstrap 3 列中。

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

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

【问题讨论】：

创建一个小提琴并更新它
已更新我的答案。抱歉匆忙。我没有注意到没有任何卷轴。您可以检查当前答案，如果有帮助，请告诉我。 :)

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是JS FIDDLE DEMO，它的工作方式与您预期的一样。实际上，你的体型没有问题。您只需要为您的 th 和 td 添加更多样式。因此，您的最终代码将是这样的：

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

如果你看一下小提琴，你会注意到我已经用 tr 包裹了 th ，这样我就可以在给予 display:block 样式后给 th 适当的宽度tr。因此，如果您想定位仅包含 th 的 tr，您也可以这样做。

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

【讨论】：

【解决方案2】：

试试 max-height 和 max-width.. 它设置最大高度和宽度

【讨论】：

谢谢，我尝试使用 max-height 但我得到了相同的行为 jsfiddle.net/PGEdK/2