如何独立于“thead”滚动表格的“tbody”？

As specified here:

如此处所述：

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, 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;
}

5 个解决方案

#1

The missing part is:

缺少的部分是：

thead, tbody {
    display: block;
}

Demo

演示

#2

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/

一个。

#3

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 */
}

#4

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;
}

#5

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;
}

#1