How to scroll table's “tbody” independent of “thead”?

As specified here:

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.

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

Answers


The missing part is:

thead, tbody {
    display: block;
}

Demo


Need Your Help

CentOS Server Name does not work

django networking nginx gunicorn centos6

I'm using CentOS 6.5 with hostname NAFD only together with ip an address 192.9.200.69. I successfully installed Django-NginX-Gunicorn with Supervisor using this tutorial.

Objective-C delegates vs Java listeners

java objective-c cocoa delegates listener

I've read a bunch of articles and readings on Objective-C delegates, trying to understand them. Coming from Java, they seem very much like Java listeners. For example, let's say I had a button in...