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

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