html - 两个表格的表格列宽必须相同

Question

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

任何帮助将不胜感激。

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

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

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

你正在寻找table-layout:fixed

见例子：

http://jsfiddle.net/RsAhk/

Answer 5

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

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

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

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

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

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

td {
    width: 20%;
}

但是，如果您可以有任意数量的列，则可以改为编写一个简单的 JQuery 脚本来确定有多少列并相应地设置宽度。

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

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

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

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

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

Answer 7

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

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

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

你的 temp.css

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

并在 HTML 文件中

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

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

        <table id="table2" class="anyClass">        
        ......
        ......
        </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>

来源：HTML 规范本身的示例