如何独立于“头”滚动表格“主体”？

Question

如W3 specification 中指定的表格：

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

我创建了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;
}

Answer 1

缺少的部分是：

thead, tbody {
    display: block;
}

Demo

Answer 2

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

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

从这个起点出发的终极高潮在这里完全实现：http://borgboyone.github.io/jquery-ui-table/

一个。

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