html - HTML表格的宽度为100％，在tbody中具有垂直滚动

Question

如何设置<table>100%宽度，并在<tbody>垂直滚动中放置一定高度？

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}
  

<table>
  <thead>
    <tr>
    	<th>Head 1</th>
    	<th>Head 2</th>
    	<th>Head 3</th>
    	<th>Head 4</th>
    	<th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>Content 1</td>
    	<td>Content 2</td>
    	<td>Content 3</td>
    	<td>Content 4</td>
    	<td>Content 5</td>
    </tr>
  </tbody>
</table>

我想避免添加一些额外的div，我只想要像这样的简单表，当我试图改变显示， table-layout， position和更多的东西在CSS表工作不好与100%宽度只有固定宽度在px。

Answer 1

为了使<tbody>元素可滚动，我们需要改变它在页面上的显示方式，即使用display: block;将其显示为块级元素。
由于我们更改了display的tbody属性，因此我们应该更改thead元素的该属性，以防止破坏表布局。
所以我们有：

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

默认情况下，Web浏览器将 thead和 tbody元素显示为行组（ table-header-group和 table-row-group）。
一旦我们改变了它，内部的 tr元素就不会填满容器的整个空间。
为了解决这个问题，我们必须计算 tbody列的宽度，并通过JavaScript将相应的值应用到 thead列。
自动宽度列
以下是上述逻辑的jQuery版本：

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $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]);
});    

下面是输出（在Windows7Chrome32上）：
WORKING DEMO。
全宽表，相对宽度列
根据原始海报的需要，我们可以将容器的 table扩展到其容器的 width的100%，然后对表的每一列使用相对（百分比） width。

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

由于表具有（某种）流体布局，因此当容器调整大小时，我们应该调整 thead列的宽度。
因此，调整窗口大小后，我们应该设置列的宽度：

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

结果将是：
WORKING DEMO。
浏览器支持和替代方案
我已经在Windows7上通过主要Web浏览器的新版本（包括IE10+）测试了上述两种方法，并且它成功了。
但是，它 doesn't work properly on IE9及以下。
这是因为在a table layout中，所有元素都应该遵循相同的结构属性。
通过对 display: block;和 <thead>元素使用 <tbody>，我们破坏了表结构。
通过JavaScript重新设计布局
一种方法是重新设计（整个）表布局。使用JavaScript动态创建新布局，并动态处理和/或调整单元格的宽度/高度。
例如，请看以下示例：
jQuery .floatThead()插件（浮动/锁定/粘性表头插件）
jQuery Scrollable Table插件。（ source code在github上）
jQuery .FixedHeaderTable()插件（ source code在github上）
数据表 vertical scrolling示例。
嵌套表
这种方法使用两个带有包含div的嵌套表，第一个 table只有一个 div单元格，第二个表放在 div元素中。
检查CSS播放时的 Vertical scrolling tables。
这适用于大多数web浏览器。我们还可以通过JavaScript动态地执行上述逻辑。
卷轴上有固定页眉的表格
由于向 <tbody>添加垂直滚动条的目的是在每行的顶部显示表标题，因此我们可以将 thead元素放置在屏幕的顶部。
这里是由 Working Demo执行的该方法的 Julien。
它有一个很有前途的网络浏览器支持。
通过 here实现 pure CSSa Willem Van Bockstal。
纯CSS解决方案
这是老答案。当然，我已经添加了一个新方法并改进了CSS声明。
固定宽度的桌子
在这种情况下， fixed应该有一个固定的 table（包括列的宽度和垂直滚动条的宽度之和）。
每个列都应该有一个特定的宽度， width元素的最后一列需要一个更大的宽度，该宽度等于其他列的宽度+垂直滚动条的宽度。
因此，CSS将是：

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    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; /* 140px + 16px scrollbar width */
}

输出如下：
WORKING DEMO。
100%宽度的桌子
在这种方法中， thead的宽度为 table，对于每个 100%和 th， td属性的值应小于 width。
另外，我们需要减小 100% / number of cols的宽度作为垂直滚动条宽度的值。
为此，我们需要使用CSS3 thead函数，如下所示：

table {
    width: 100%;
    border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

这是 Online Demo。
注意：如果每一列的内容都断行，即每个单元格的内容应该足够短，则此方法将失败。
在下面，有两个简单的纯CSS解决方案的例子，我在回答这个问题时创建的。
这是 jsFiddle Demov2。
旧版本： jsFiddle Demov1