1

我正在尝试使表格 tbody 可滚动，并阅读这个SO question 我发现我必须将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;
});

我需要每个 tbody td，与他的第“bestfriend”列对齐。

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

4

2 回答 2

0

尝试这个

    <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>");

    });
});
于 2013-06-07T07:56:37.783 回答
0

我会推荐使用DataTables。起初我持怀疑态度，但现在我将它们用于一切。它们支持很多功能，从导出文件到过滤、tbody滚动等。你会爱上它们的……

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

于 2013-06-07T08:07:13.140 回答