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

本文介绍了如何滚动表的“tbody”独立于“thead”？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如所指定：

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

推荐答案

缺少的部分是： / p>

The missing part is:

thead, tbody {
    display: block;
}

这篇关于如何滚动表的“tbody”独立于“thead”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！