如何滚动表的“tbody”独立于“thead”？ [英] How to scroll table's "tbody" independent of "thead"?

问题描述

如此处所指定：

表行可以使用THEAD，TFOOT和TBODY元素分组为表头，表脚和一个或
多个表体部分，
。这个划分使用户代理能够支持滚动
的表体，而与表头和脚无关。

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.

a href =http://jsfiddle.net/nyCKE/1/>以下示例，但它不起作用。

I created the following example, but it doesn't work.

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

推荐答案

缺少的部分是： / p>

The missing part is:

thead, tbody {
    display: block;
}

演示

这篇关于如何滚动表的“tbody”独立于“thead”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！