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 https://stackoverflow.com/a/3076790/89211

<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

如果您知道每个表格恰好有5列，那么应用width: 20%是最好的选择：

td {
    width: 20%;
}

但是如果你可以有任意数量的列，你可以编写一个简单的JQuery脚本来计算出有多少列并相应地设置宽度。

这是JSFiddle demo。我修改了HTML以将id="first"添加到第一个表中，因此我可以获得它的具体引用。那么JavaScript是这样的：

var num = $("table#first tr:first-child > td").length;
var width = (100 / num) + "%";

$("td").css("width", width);

基本上它抓取#first表的第一行并计算列数。然后它找到该列数的相应百分比宽度。然后它将该宽度应用于所有<td>元素。

只要colspan上没有定义td，就会有效，这会导致列数失效。由于您已在两个表上定义了显式宽度，因此列将相等。

Answer 5

如果未通过样式给出宽度，则表格单元格宽度取决于其内容。

默认情况下，大多数浏览器使用自动表格布局算法。该调整表格及其单元格的宽度以适合内容。

如果您想要具有不同表格的表格单元格的精确宽度，请先了解以下说明。

表格和列宽由表格和列的宽度设置元素或第一行单元格的宽度。细胞在后续行不会影响列宽。在“固定”布局下方法，整个表可以渲染一次第一个表行已下载并分析。这可以加快渲染时间 “自动”布局方法，但后续单元格内容可能不会适合所提供的列宽。单元格使用overflow属性确定是否剪辑任何溢出的内容，但仅限于桌子有一个已知的宽度;否则，它们不会溢出细胞。

<强> CSS

table{
    table-layout:fixed; /* same width will be applied to both the tables*/
}
table td {
    width:20%;  /*20% width for 5 td elements*/
}

了解更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Answer 6

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

使用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>

Answer 7

定义任何css类并对其进行格式化，然后在表e-g

上使用该类

你的temp.css

.anyClass tr td{
width: 150p;
etc...
}

并在HTML文件中

    <table id="table1" class="anyClass">

        ......
        ......
        </table>

        <table id="table2" class="anyClass">        
        ......
        ......
        </table>

Answer 8

我们可以将所有第二个表行移动到第一个表。然后设置表格单元格宽度样式以固定列宽。完成此操作后，我们可以将行移回秒表。而且，如果表格中包含图片或字体，则应在加载图片或字体后进行工作。

/**
* Align two table column width
* @param {HTMLTableElement} table1
* @param {HTMLTableElement} table2
*/
function fixTableCellWidth (table1, table2) {
    // container means `thead` or `tbody`
    const sourceContainers = Array.from(table2.children);
    const sourceTrs = sourceContainers.map(container => Array.from(container.children));
    // move second table rows to first table
    sourceTrs.forEach(trs => {
        trs.forEach(tr => {
            table1.lastElementChild.appendChild(tr);
        });
    });
    // fix table cell width
    Array.from(table1.children).forEach(container => {
        Array.from(container.children).forEach(tr => {
            Array.from(tr.children).forEach(td => {
                if (td.style.width) return;
                const rect = td.getClientRects()[0];
                td.style.width = `${rect.width}px`;
            });
        });
    });
    // move back the second table rows
    sourceTrs.forEach((trs, index) => {
        const container = sourceContainers[index];
        trs.forEach(tr => {
            container.appendChild(tr);
        });
    });
}

// Call `fixTableCellWidth` after ready
document.addEventListener('DOMContentLoaded', () => {
    fixTableCellWidth(document.getElementById('table1'), document.getElementById('table2'));
});

* {
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
}

table td {
    border: 1px solid;
}

First Table:
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
    <tr>
        <td>hdng 1</td>
        <td>hdng 2</td>
        <td>hdng 3</td>
        <td>hdng 4</td>
        <td>hdng 5</td>
    </tr>
</tbody>
</table>
Second 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>

Answer 9

我在 jQuery 中为我的 div 表创建了这个，其中我有两个表，表单元格是标签和表单字段。 jQuery：

    $(".table").last().children().find("label").css("table", $(".table").first().children().find("label").css("width"));

CSS：

    .table {display:table;}
    .table div {display: table-row;}
    .table .formTitle {text-align: center;display: table-caption;}
    .table select,
    .table input,
    .table label {display: table-cell;}

HTML：

    <div class="table">
        <div class="formTitle"><span id="txtBI"></span></div>
        <div class="visTog"><label></label><input type="text" id="EntName"></div>
        <div class="visTog opac"><label></label><select id="EntYear"></select></div>
        <div class="visTog opac"><label></label><select id="EntMonth"></select></div>
        <div class="visTog opac"><label></label><select id="EntDay"></select></div>
    </div>
    <div class="table">
        <div class="visTog locrdsC formTitle"><span id="txtCalVal"></span></div>
        <div class="visTog locrdsC"><label></label><input type="text" name="gmt" id="EntposGMT" class="locrds"></div>
        <div class="visTog locrdsC"><label></label><input type="text" name="EntJday" id="EntJday" class="locrds"></div>
    </div>

</div>

不过这有一个问题。可以编写一个脚本来衡量哪个更大，但在我的情况下，这不是必需的。

我倾向于让表单更具交互性以提高可用性；因此可见性切换和不透明度类，但对单元格宽度函数没有影响。

Answer 10

您可以通过将表格与每个表格的tbody组合（如@Relequestual所建议），并将标题使用<th scope="rowgroup">来同步列宽度：

table {
  border-collapse: collapse;
}

table thead,
table tbody {
  border-bottom: solid;
}

table tbody th {
  text-align: left;
}

<table>
  <thead>
    <tr> <th> ID <th> Measurement <th> Average <th> Maximum
  <tbody>
    <tr> <td> <th scope=rowgroup> Cats <td> <td>
    <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
    <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
  <tbody>
    <tr> <td> <th scope=rowgroup> English speakers <td> <td>
    <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
    <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>

来源：Example in the HTML spec itself

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

10 个答案: