制作桌子的 <tbody> 使用display：block和offsetWidth可滚动

Question

我试图使表tbody可以滚动，并且阅读了这个 SO问题，发现我必须应用display: block; 再加overflow和固定height表的tbody 。

另外，要设置tbody宽度以匹配thead宽度，我需要为第一行的td设置offsetWidth 。

到目前为止，这是我尝试过的： FIDDLE

如您所见，表tbody占用的空间不正确。更改offsetWidth似乎不是正确的事情（或者我做错了）：

$("tbody tr:first-child").find("td").each(function (index) {
    this.offsetWidth = this.style.width;
});

我需要每个人td，以使其与他的“最好的朋友”专栏保持一致。

任何想法？ 我究竟做错了什么？

Answer 1

尝试这个

    <div id="wrap1">
    <table width="100%">
            <tr>
                <th style="width: 20%;">Header one</th>
                <th style="width: 20%;">Header two</th>
                <th style="width: 20%;">Header three</th>
                <th style="width: 20%;">Header four</th>
                <th style="width: 20%;">Header five</th>
            </tr>
    </table>
</div>
<div id="wrap2">
        <table width="100%">
            <tr>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
                <td style="width: 20%;">content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
    </table>
</div>
<div id="output"></div>

#wrap1 {
width: 400px;
height:50px;

}

#wrap2 {
    width: 417px;
    height:150px;
    overflow-y:auto;
}
#wrap1 tr {
    background:lightblue;
    position:alsolute;
}

#wrap2 tr {
    background: lightgray;
}




$(document).ready(function () {
    $("tbody tr:first-child").find("td").each(function (index) {
        this.offsetWidth = this.style.width;
        $("#output").append("[ #" + (index+1) + " td ] width: " + this.style.width + " | offsetWidth: " + this.offsetWidth + "<br>");

    });
});

Answer 2

我建议使用DataTables 。 一开始我很怀疑，但现在我将它们用于所有操作。 它们支持很多功能，从导出文件到过滤 ，正文滚动等。您会喜欢它们的...

编辑：更不用说它们是免费的，并且它们可以在大多数主流浏览器中使用...