如何独立于"thead"滚动表格的"tbody"？

Question

如此处所述:

表行可以分别使用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;
}

演示