为了使
<tbody>元素可滚动，我们需要更改其在页面上的显示方式，即用于
display: block;将其显示为块级元素。
由于我们更改了的
display属性
tbody，因此我们也应该更改
theadelement的属性，以防止破坏表布局。
因此，我们有：
thead, tbody { display: block; }tbody { height: 100px; overflow-y: auto; overflow-x: hidden; }默认情况下，
Web浏览器将
thead和
tbody元素显示为行组（
table-header-group和
table-row-group）。
一旦更改，内部tr元素将无法填充其容器的整个空间。
为了解决这个问题，我们必须计算tbody列的宽度，然后thead通过Javascript 将相应的值应用于列。
自动宽度列
这是上述逻辑的jQuery版本：
// Change the selector if neededvar $table = $('table'), $bodyCells = $table.find('tbody tr:first').children(), colWidth;// Get the tbody columns width arraycolWidth = $bodyCells.map(function() { return $(this).width();}).get();// Set the width of thead columns$table.find('thead tr').children().each(function(i, v) { $(v).width(colWidth[i]);}); 这是输出（在Windows 7 Chrome 32上）：
全宽表，相对宽度列
根据原始海报的需要，我们可以将其扩大table到width其容器的100％，然后对表的每一列使用相对值（Percentage）width。
table { width: 100%; }tbody td, thead th { width: 20%; }由于表格具有（多种）流体布局，因此在调整thead容器大小时，我们应该调整列的宽度。
因此，一旦调整窗口大小，我们应该设置列的宽度：
// Adjust the width of thead cells when *window* resizes$(window).resize(function() { }).resize(); // Trigger the resize handler once the script runs输出为：
机身内部带有垂直滚动的流体工作台
浏览器支持和替代
我已经通过新版本的主要Web浏览器（包括IE10 +）在Windows 7上测试了上述两种方法，并且该方法有效。
但是，它不 工作 正常 上IE9及以下。
这是因为在表格布局中，所有元素都应遵循相同的结构属性。
通过使用
display: block;为
<thead>和
<tbody>元素，我们把这个表结构。
通过Javascript重新设计布局
一种方法是重新设计（整个）表布局。使用Javascript动态创建新的布局并处理和/或动态调整单元格的宽度/高度。
例如，看下面的例子：
- jQuery .floatThead（）插件（一个浮动/锁定/粘贴表头插件）
- jQuery Scrollable Table插件。（github上的源代码）
- jQuery .FixedHeaderTable（）插件（github上的源代码）
嵌套表
这种方法使用两个包含一个div的嵌套表。第一个表table只有一个具有的单元格，div第二个表位于该div元素内。
在CSS Play上检查Vertical滚动表。
这适用于大多数Web浏览器。我们还可以通过Javascript动态地执行上述逻辑。
具有固定标题的表格滚动
由于向中添加垂直滚动条的目的
这是Julien进行的这种方法的工作演示。 它具有有前途的Web浏览器支持。
而且在这里一个纯CSS通过实施威廉·Bockstal。
纯CSS解决方案
这是旧答案。当然，我添加了一个新方法并完善了CSS声明。
固定宽度桌
在这种情况下，table应当具有固定的值width （包括列的宽度和垂直滚动条的宽度之和）。
每列应具有特定的宽度，元素的最后一列应具有thead更大的宽度，该宽度等于其他列的宽度 + 垂直滚动条的宽度。
因此，CSS将为：
table { width: 716px; border-spacing: 0;}tbody, thead tr { display: block; }tbody { height: 100px; overflow-y: auto; overflow-x: hidden;}tbody td, thead th { width: 140px;}thead th:last-child { width: 156px; }这是输出：
固定宽度桌
宽度为100％的桌子
在这种方法中，每个table的宽度100%为th和td，width属性的值应小于100% / number of cols。
另外，我们需要减小垂直滚动条宽度的theadas值的宽度。
为此，我们需要使用CSS3 calc()函数，如下所示：
table { width: 100%; border-spacing: 0;}thead, tbody, tr, th, td { display: block; }thead tr { width: 97%; width: -webkit-calc(100% - 16px); width: -moz-calc(100% - 16px); width: calc(100% - 16px);}tr:after { content: ' '; display: block; visibility: hidden; clear: both;}tbody { height: 100px; overflow-y: auto; overflow-x: hidden;}tbody td, thead th { width: 19%; float: left;}注意：如果每列的内容都使行中断，则该方法将失败，即，每个单元格的内容应足够短。
