1

テーブル tbody をスクロール可能にしようとしていますが、このSO の質問を読んで、テーブルの にdisplay: block;プラスoverflowと固定を適用する必要があることがわかりました。heighttbody

また、tbody幅に合わせて幅を設定するには、最初の行のtheadを設定する必要があります。offsetWidthtd

これは私がこれまでに試したことです: FIDDLE

ご覧のとおり、テーブルtbodyは適切な量のスペースをoffsetWidth使用していません..を変更することは正しいことではないようです (または、私は間違っています):

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

私はすべての tbody td が必要です。

何か案が？私は何を間違っていますか？

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 に答える