Comment faire défiler le "tbody" de la table indépendamment de "thead"?

Question

Comme indiqué ici:

Les lignes de la Table peuvent être regroupées en tête de table, pied de table, et d'un ou plus de la table de sections à l'aide de la THEAD, TFOOT et TBODY éléments, respectivement. Cette division permet à l'utilisateur les agents en charge le défilement de la table des organismes indépendamment de la table, la tête et le pied.

J'ai créé l' exemple suivant, mais ça ne fonctionne pas.

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

La partie manquante est:

 thead, tbody {
    display: block;
}
 

Démo

Answer 2

thead {
  position: fixed;
  height: 10px; /* This is whatever height you want */
}
  tbody {
  position: fixed;
  margin-top: 10px; /* This has to match the height of thead */
  height: 300px; /* This is whatever height you want */
}