使用Bootstrap 3固定高度,标题和柱宽的表格

Question

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

• 固定头,
• 固定高度(带可见滚动条)
• 3个固定宽度的柱子(一个大柱子和两个窄柱子).

我开始使用:

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

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

该表包含在Bootstrap 3列中.

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

有任何想法吗？提前致谢.

Answer 1

这是JS FIDDLE DEMO,它正如您所期望的那样工作.实际上,你的tbody风格没有问题.您只需要为th和td添加更多样式.所以,你的最终代码将是这样的:

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

如果你看小提琴,你会注意到我用tr包裹了th,这样我就可以在显示后给出适当的宽度:块样式为tr.所以,如果你想定位只包裹th的tr,你也可以这样做.

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