如何让表格的"tbody“独立于"thead"？
如表的W3 specification中所指定的：
表行分组为表头、表脚和一个或多个表体部分。这种划分使用户代理能够支持独立于表头和表脚的表体滚动。
我创建了following example，但它不工作。
HTML：
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>JS：
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});CSS：
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}回答 5
Stack Overflow用户
发布于 2011-11-30 14:29:44
Stack Overflow用户
发布于 2014-11-27 08:17:33
大约一个月前，当我遇到类似的问题时，我看到了这篇文章。我需要在ui对话框中使用y轴滚动表格(是的，您没听错)。我很幸运，因为一个有效的解决方案很快就出现了。然而，没过多久，解决方案就有了自己的生命，但稍后会有更多内容。
仅将顶层元素(thead、tfoot和tbody)设置为显示块的问题在于，浏览器对各个组件之间的列大小的同步很快就会丢失，并且所有内容都会打包到允许的最小大小。设置列的宽度似乎是最好的做法，但是如果没有设置所有内部表组件的宽度来匹配这些列的总数，即使使用固定的表布局，当滚动条出现时，标题和正文之间也会有轻微的差异。
我的解决方案是设置所有的宽度，检查滚动条是否存在，然后采用浏览器实际决定的缩放宽度，并将这些宽度复制到页眉和页脚，根据滚动条的大小调整最后一列的宽度。这样做为列宽提供了一些流动性。如果表格的宽度发生变化，大多数主要浏览器都会相应地自动缩放tbody列的宽度。剩下的工作就是根据页眉和页脚的tbody大小来设置它们的列宽。
$table.find("> thead,> tfoot").find("> tr:first-child")
.each(function(i,e) {
$(e).children().each(function(i,e) {
if (i != column_scaled_widths.length - 1) {
$(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
} else {
$(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
}
});
});这个小提琴演示了这些概念：http://jsfiddle.net/borgboyone/gbkbhngq/。
请注意，单独的y轴滚动不需要表包装或附加表。(X轴滚动不需要折叠表。)如果遇到header或body列的最小包大小，则body和header列大小之间的同步仍将丢失。如果可以选择调整大小或需要较小的表格宽度，则应提供最小宽度的机制。
从这个起点开始的最终结果在这里完全实现了：http://borgboyone.github.io/jquery-ui-table/
一个。
Stack Overflow用户
发布于 2016-04-08 01:25:51
尝尝这个。
table
{
background-color: #aaa;
}
tbody
{
background-color: #ddd;
height: 100px;
overflow-y: scroll;
position: absolute;
}
td
{
padding: 3px 10px;
color: green;
width: 100px;
}https://stackoverflow.com/questions/8321849
复制相似问题