Question

我正在努力让一个桌子可滚动，并且阅读this所以我发现了问题我必须将display: block;加overflow和固定height应用于表tbody。

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

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

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

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

我需要每个td 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。起初我对此持怀疑态度，但现在我将它们用于一切。它们支持很多功能，从exporting文件到filtering，tbody scrolling等。您会爱上它们......

编辑：更不用说它们是免费的，而且它们适用于大多数主流浏览器......

使用display：block和offsetWidth使表格可滚动

2 个答案: