Html 两个表的表列宽必须相同

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

hdng 1
hdng 2
hdng 3
hdng 4
hdng 5
内容
骗局
内容
内容
内容

---

任何帮助都将不胜感激。

您正在寻找的

表格布局：已修复

见示例：

---

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

你的临时工

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

和在HTML文件中

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

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

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

......
......
......
......

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

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

---

如果您知道每个表正好有5列，那么应用

宽度：20%

是您的最佳选择：

td {
    width: 20%;
}

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

这是一本书。我修改了HTML，将

id=“first”

添加到第一个表中，以便获得对它的具体引用。那么JavaScript是这样的：

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

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

基本上，它获取

#first

表的第一行并计算列数。然后，它会找到该列数对应的宽度百分比。然后将该宽度应用于所有

元素

---

只要在

td

s上没有定义

colspan

，这将导致列计数中断，这将起作用。因为您在两个表上都定义了显式宽度，所以列将相等。

我知道这个问题已经有一年了，但是有一种方法可以解决您的问题！ 在

表

标记内，可以使用

thead

和

tbody

标记对行进行分组。您还可以有多个

tbody

标记，这允许您保持宽度相同（因为它们将是相同的表），但根据需要使用不同的样式（或者在我的示例中，显示和隐藏）

示例HTML可在此答案中找到，复制以供检索

客户订单
客户1月1日
客户1#2四月
客户1#3搜索
客户2#1月1日
客户2#2四月
客户2#3搜索
客户3月1日
客户3#2四月
客户3#3搜索

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

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

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

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

CSS

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

---

有关详细信息，您可以将表格与每个表格的

tbody

相结合（如@Relequestual所建议），并对标题使用

来同步列宽：

表格{
边界塌陷：塌陷；
}
表thead，
桌体{
边框底部：实心；
}
表tbody th{
文本对齐：左对齐；
}

ID测量平均最大值
猫
93支腿3.5 4
10尾11
说英语的
32支腿2.67 4
35尾0.331

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

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

如果两个表都可以单独选择（我刚刚添加了ID），并且可以将添加到一个表中的行分组（我使用了tbody标记），这样就可以轻松删除添加的行

希望这有助于某些人，即使它是八年后，原来的职位

//将表2添加到表1中
$（“#表1”）.append（$（#表2 tbody”）.clone（true））；
设表1_elems=$（“#表1 tr:first td”）；
设表2_elems=$（“#表2 tr:first td”）；
$（表1要素）。每个（功能（i）{
//从组合表中获取列宽并应用于两个表
//（第一个似乎是多余的，但在删除行后是必需的）
$（this.width（$（this.width（））；
$（表2_elems[i]）.width（$（this.width（））；
});
//删除添加的行
$（“#表1 t正文：最后一个”）.remove（）

hdng 1
hdng 2
hdng 3
hdng 4
hdng 5
内容
骗局
内容
内容
内容
我们可以将第二个表中的所有行移动到第一个表中。然后将表格单元格宽度样式设置为“固定”
table{
    table-layout:fixed; /* same width will be applied to both the tables*/
}
table td {
    width:20%;  /*20% width for 5 td elements*/
}