如何查找表的列寬並應用於同一頁面中的另一個表

Question

我正在使用2個表來創建可滾動表。 但是它們是2個分離的表，列寬不匹配。 如何從tbody獲取列寬並將其應用於thead？

<div>
    <table id="header">
        <thead>
            <tr>
                <td>header 1</td>
                <td>header 2</td>
                <td>header 3</td>
                <td>header 4</td>
            </tr>
        </thead>
    </table>
</div>
<div class="scrollable">
    <table id="body">
        <tbody>
            <tr>
                <td>data 1-1</td>
                <td>1-2</td>
                <td>data 1-3</td>
                <td>data 1-4</td>
            </tr>
            <tr>
                <td>data 2-1</td>
                <td>2-2</td>
                <td>data 2-3</td>
                <td>data 2-4</td>
            </tr>
            <tr>
                <td>data 3-1</td>
                <td>3-2</td>
                <td>length testing</td>
                <td>data 3-4</td>
            </tr>
            <tr>
                <td>data 4-1</td>
                <td>short</td>
                <td>data 4-3</td>
                <td>data 4-4</td>
            </tr>
        </tbody>
    </table>
</div>

的jsfiddle

先感謝您。

Answer 1

這應該給您您想要的東西。 桌子的寬度也必須匹配。

//match the table width
$("#header").width($("#body").width());

var bodyTr = $("#body tr:first td");
$("#header tr:first td").each(function(index, value) {
    $(this).width(bodyTr.eq(index).width());
});

這是您修改過的小提琴： https : //jsfiddle.net/3L17sgjw/4/

Answer 2

您可以為每個列設置一個類，如下所示：

$("#header td:nth-of-type(1)").addClass("column1");
$("#body td:nth-of-type(1)").addClass("column1");
//And so with every column you want

然后為該類設置固定的寬度值。 正確的方法是使用for循環，不要為每一列重復相同的兩行。

但是我認為，如果僅將“ scrollable”類添加到tbody中，而不必將thead和tbody分開放在不同的div中，則會更容易。