两个表格的表格列宽必须相同答案

【问题标题】：Table Column width must be same for two tables两个表格的表格列宽必须相同
【发布时间】：2012-08-24 18:59:24
【问题描述】：

有两个表格，宽度为 600 像素，每个表格有 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>

任何帮助将不胜感激。

【问题讨论】：

你能把它做成一张桌子吗？然后在表格之间合并单元格，使其看起来不像表格
您是否希望第 2 列比其他列更窄？
Make 2 tables have the same column sizes 的可能重复项

标签： html css width

【解决方案1】：

我在 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>

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

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

【讨论】：

tip : 使用语言标识符突出代码并使其更具可读性
谢谢提示，在第一次贡献中学到了很多；）

【解决方案2】：

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

/**
* 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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以通过将表格与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

【讨论】：

【解决方案5】：

我知道这个问题已经存在一年了，但是有一种方法可以满足您的要求！在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>

【讨论】：

我在使用这种方法时遇到的问题是我也使用了多个标题，并且在打印时，它会在每一页上重复第一个。（我希望它重复与当前 tbody 一起使用的主题。）
我知道这不一定是最好的解决方案，但可以选择两次打印表格。一次使用多个theads，另一个使用实际单独的表，但使用打印媒体查询，因此该表仅在打印时显示（另一个被隐藏）
您也可以为每个tbody 添加标题。使用<tr><th scope="rowgroup">Header for this tbody's data。见Example。
@CletusW 我认为这是我回答后的新问题。考虑将其添加为新答案 =]

【解决方案6】：

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

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

如果你想对不同表格的表格单元格有一个精确的宽度，那么首先要了解下面的描述。

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

CSS

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

【讨论】：

【解决方案7】：

如果您知道每个表正好有 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> 元素。

只要在tds 上没有定义colspan，这将起作用，这会导致列数丢失。由于您在两个表上都定义了明确的宽度，因此列将相等。

【讨论】：

【解决方案8】：

如果您希望所有列的宽度相同，并且由于您确定每个表中恰好有五列，我建议：

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

【讨论】：

只需将table-layout:fixed 应用于table 就可以了，并且完美地对齐了列。
我认为这是对问题的误解；它正在寻找（非固定的）列宽在不同的表中是相同的。

【解决方案9】：

定义任何 css 类并对其进行格式化，然后在两个表 e-g 上使用该类

你的 temp.css

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

在 HTML 文件中

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

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

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

【讨论】：

你的答案根本行不通。您在table 上设置类，然后将table 的宽度设置为150px。您需要为所有单元格设置类名。但是随后您将所有单元格强制为操作不想要的固定宽度。
@sarcastyx 感谢您的评论，更新了答案，这将正常工作，
这行得通。但这又回到了OP不想在表格单元格上设置固定宽度的问题。
我不想为表格固定任何宽度。它必须即时设置。例如：如果 THEAD TH 大于 TBODY TD。然后，THEAD TH 宽度应分配给 TBODY TD。否则，TBODY TD 宽度应分配给 THEAD TH。我只知道 TABLE 的宽度。休息应该是动态发生的。可以使用jQuery。

【解决方案10】：

您正在寻找table-layout:fixed

参见示例：

http://jsfiddle.net/RsAhk/

【讨论】：