如何滚动表格的“正文”独立于“头部”？

Question

正如表的 W3 规范中所指定：

表格行可以分为桌头、桌脚和一个或多个 更多表格主体部分，使用 THEAD, TFOOT 和 TBODY 元素， 分别。这种划分使用户代理能够支持滚动 独立于桌头和桌脚的桌体。

我创建了以下示例，但它不起作用。

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

Answer 1

缺少的部分是：

thead, tbody {
    display: block;
}

演示

Answer 2

大约一个月前，当我遇到类似问题时，我看到了这篇文章。我需要 y 轴滚动 ui 对话框内的表格（是的，你没听错）。我很幸运，因为一个可行的解决方案很快就出现了。然而，没过多久，该解决方案就获得了自己的生命，但随后又出现了更多内容。

仅将顶级元素（thead、tfoot 和 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 轴滚动确实需要包装表。）如果遇到标题或正文列的最小包大小，正文和标题的列大小之间的同步仍然会丢失。如果可以选择调整大小或需要较小的表格宽度，则应提供最小宽度的机制。

从这个起点开始的最终高潮在这里得到了充分实现： http://borgboyone.github.io/ jquery-ui-table/

A.

Answer 3

试试这个。

table 
{
    background-color: #aaa;
}

tbody 
{
    background-color: #ddd;
    height: 100px;
    overflow-y: scroll;
    position: absolute;
}

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}

Answer 4

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

Answer 5

强制性部分：

tbody {
    overflow-y: scroll;  (could be: 'overflow: scroll' for the two axes)
    display: block;
    with: xxx (a number or 100%)
}

thead {
    display: inline-block;
}