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循环，不要为每列重复相同的两行。

但我认为如果你只是将'可滚动'类添加到tbody而不保持thead和tbody在不同的div中分开会更容易。

如何查找表列宽度并应用于同一页面中的另一个表

2 个答案: