如何滚动表的“tbody”独立于“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;
}