Javascript 如何独立于“thead”滚动表格的“tbody”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8321849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll table's "tbody" independent of "thead"?
提问by Misha Moroshko
As specified in the W3 specificationfor Tables:
如表的W3 规范中所述：
Table rows may be grouped into a table head, table foot, and one or more table body sections, using the
THEAD,TFOOTandTBODYelements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot.
可以分别使用
THEAD、TFOOT和TBODY元素将表格行分组为表格头、表格脚和一个或多个表格主体部分。这种划分使用户代理能够支持独立于表头和表脚的表体滚动。
I created the following example, but it doesn't work.
我创建了以下示例，但它不起作用。
HTML:
HTML：
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS:
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:
CSS：
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
回答by Borgboy
I saw this post about a month ago when I was having similar problems. I needed y-axis scrolling for a table inside of a ui dialog (yes, you heard me right). I was lucky, in that a working solution presented itself fairly quickly. However, it wasn't long before the solution took on a life of its own, but more on that later.
大约一个月前，当我遇到类似问题时，我看到了这篇文章。我需要为 ui 对话框内的表格滚动 y 轴（是的，你没听错）。我很幸运，因为一个可行的解决方案很快就出现了。然而，不久之后该解决方案就开始了自己的生命，但稍后会详细介绍。
The problem with just setting the top level elements (thead, tfoot, and tbody) to display block, is that browser synchronization of the column sizes between the various components is quickly lost and everything packs to the smallest permissible size. Setting the widths of the columns seems like the best course of action, but without setting the widths of all the internal table components to match the total of these columns, even with a fixed table layout, there is a slight divergence between the headers and body when a scroll bar is present.
仅将顶级元素（thead、tfoot 和 tbody）设置为显示块的问题在于，浏览器对各个组件之间的列大小的同步很快就会丢失，并且所有内容都打包到允许的最小大小。设置列的宽度似乎是最好的做法，但是如果没有将所有内部表格组件的宽度设置为与这些列的总数相匹配，即使表格布局固定，标题和正文之间也存在轻微差异当出现滚动条时。
The solution for me was to set all the widths, check if a scroll bar was present, and then take the scaled widths the browser had actually decided on, and copy those to the header and footer adjusting the last column width for the size of the scroll bar. Doing this provides some fluidity to the column widths. If changes to the table's width occur, most major browsers will auto-scale the tbody column widths accordingly. All that's left is to set the header and footer column widths from their respective tbody sizes.
我的解决方案是设置所有宽度，检查是否存在滚动条，然后采用浏览器实际决定的缩放宽度，并将它们复制到页眉和页脚，调整最后一列的宽度以适应滚动条。这样做为列宽提供了一些流动性。如果表格的宽度发生变化，大多数主要浏览器都会相应地自动缩放 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());
}
});
});
This fiddle illustrates these notions: http://jsfiddle.net/borgboyone/gbkbhngq/.
这个小提琴说明了这些概念：http: //jsfiddle.net/borgboyone/gbkbhngq/。
Note that a table wrapper or additional tables are not needed for y-axis scrolling alone. (X-axis scrolling does require a wrapping table.) Synchronization between the column sizes for the body and header will still be lost if the minimum pack size for either the header or body columns is encountered. A mechanism for minimum widths should be provided if resizing is an option or small table widths are expected.
请注意，单独的 y 轴滚动不需要表包装器或附加表。（X 轴滚动确实需要一个换行表。）如果遇到标题或正文列的最小包大小，正文和标题的列大小之间的同步仍将丢失。如果可以选择调整大小或需要小表格宽度，则应提供最小宽度机制。
The ultimate culmination from this starting point is fully realized here: http://borgboyone.github.io/jquery-ui-table/
这个起点的最终高潮在这里完全实现：http: //borgboyone.github.io/jquery-ui-table/
A.
一种。
回答by Bhimbim
try this.
尝试这个。
table
{
background-color: #aaa;
}
tbody
{
background-color: #ddd;
height: 100px;
overflow-y: scroll;
position: absolute;
}
td
{
padding: 3px 10px;
color: green;
width: 100px;
}
回答by John K. Chow
thead {
position: fixed;
height: 10px; /* This is whatever height you want */
}
tbody {
position: fixed;
margin-top: 10px; /* This has to match the height of thead */
height: 300px; /* This is whatever height you want */
}
回答by freignat
mandatory parts:
必填部分：
tbody {
overflow-y: scroll; (could be: 'overflow: scroll' for the two axes)
display: block;
with: xxx (a number or 100%)
}
thead {
display: inline-block;
}
