如何找到 table 列宽并应用于同一页面中的另一个 table

Question

我正在使用 2 table 来创建一个可滚动的 table。但是它们是 2 个分开的 tables 并且列宽不匹配。如何从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

您可以为每一列设置一个 class，如下所示：

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

然后为 class 设置固定宽度值。正确的做法是使用 for 循环，不要为每一列重复相同的两行。

但我认为，如果您只是将 'scrollable' class 添加到 tbody 中，而不将 thead 和 tbody 分隔在不同的 div 中，那会更容易。

Answer 2

这应该能满足您的需求。 table 宽度也必须匹配。

//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());
});

这是您修改后的 fiddle：https://jsfiddle.net/3L17sgjw/4/

如何找到 table 列宽并应用于同一页面中的另一个 table

how to find table column width and apply to another table in the same page

javascript

jquery

html-table