小编典典

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

css

如表的W3规范中]所指定:

表中的行可以被分组到一个表头,表脚,和一个或多个表体部分,使用THEADTFOOTTBODY分别的元件。这种划分使用户代理能够独立于桌子的头和脚来支持桌子主体的滚动。

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

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

阅读 273

收藏
2020-05-16

共1个答案

小编典典

缺少的部分是:

thead, tbody {
    display: block;
}
2020-05-16