对于两个表,表列宽度必须相同

Question

有两个表,宽度为600px,每个列为5列.但是,尚未为每列设置宽度.在这里,我想让两个表中的列宽必须相同.你可以使用CSS或jQuery.而且,我不想手动修复列宽.

HTML示例:

<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>content content content</td>
        <td>con</td>
        <td>content content content</td>
        <td>content content content</td>
        <td>content content content</td>
    </tr>
</table>

任何帮助将受到高度赞赏.

Answer 1

如果您希望所有列的宽度相同,并且由于您确定每个表中只有五列,我建议:

<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>

Answer 2

我知道这个问题已经有一年了,但是有办法做你要问的事!在table标记内,您可以使用thead和tbody标记对行进行分组.您还可以使用多个tbody标签,这样可以保持宽度相同(因为它们将是同一个表),但样式与所需的不同(或者在我的情况下,显示和隐藏).

示例HTML可以在这个答案中找到,复制为retnension /sf/answers/215375331/

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

Answer 3

您正在寻找table-layout:fixed

参见示例：

http://jsfiddle.net/RsAhk/

Answer 4

我遇到了同样的问题，我发现了一种不干净但有效的方法。

使用 JavaScript，您可以暂时组合两个表格以获得所需的自动调整列宽，并将这些宽度应用于两个表格中的元素。在将不会删除的行中的两个表应用宽度后，您可以删除添加到组合表中的行。

如果两个表都可以单独选择（我刚刚添加了 ID）并且您可以将添加到一个表中的行分组（我使用 tbody 标签），那么最简单的方法是您可以轻松删除您添加的内容。

希望这对某人有所帮助，即使原始帖子晚了八年！

//add table 2 to table 1
$("#table1").append($("#table2 tbody").clone(true));

let table1_elems = $("#table1 tr:first td");
let table2_elems = $("#table2 tr:first td");
$(table1_elems).each(function(i) {
    //get the column width from the combined table and apply to both tables
    //(first one seems redundant, but is necessary once rows are removed)
    $(this).width($(this).width());
    $(table2_elems[i]).width($(this).width());
});

//remove the added rows
$("#table1 tbody:last").remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</table>
<table id="table2" width="600" border="1" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>content content content</td>
            <td>con</td>
            <td>content content content</td>
            <td>content content content</td>
            <td>content content content</td>
        </tr>
    </tbody>
</table>