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

Table Column width must be same for two tables

提问by Raju Sarvasiddi

There are two tables with width 600px and 5 Columns each. But, width has not been set for each column. Here, I want to make columns width must be same in both the tables. You can use CSS or jQuery. And, I dont want to fix the column width manually.

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

HTML Example:

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>

Any help would be highly appreciated.

任何帮助将不胜感激。

回答by Passerby

If you want all columns are in the same width, and since you're sure that you'll have exactly five columns in each table, I would suggest:

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

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

回答by Relequestual

I know this question is a year old, but there is a way to do what you're asking! Inside the tabletag, you can use theadand tbodytags to group rows. You can also have multiple tbodytags, which allows you to keep the width the same (as they will be the same table), but style differently as required (or in my case, show and hide).

我知道这个问题已经有一年了，但是有一种方法可以满足您的要求！在table标签内，您可以使用thead和tbody标签对行进行分组。您也可以有多个tbody标签，这允许您保持宽度相同（因为它们将是同一个表格），但根据需要设置不同的样式（或者在我的情况下，显示和隐藏）。

Example HTML can be found in this answer, copied for retnension https://stackoverflow.com/a/3076790/89211

示例 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>

回答by Lucas Green

You are looking for table-layout:fixed

你正在寻找 table-layout:fixed

see example:

见示例：

http://jsfiddle.net/RsAhk/

http://jsfiddle.net/RsAhk/

回答by Roddy of the Frozen Peas

If you know that each table will have exactly 5 columns, applying width: 20%is your best bet:

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

td {
    width: 20%;
}

But if you can have any number of columns, you can instead write a simple JQuery script to figure out how many columns there are and set the widths accordingly.

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

Here is a JSFiddle demo. I modified the HTML to add id="first"to the first table, so I could get a concrete reference to it. Then the JavaScript is this:

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

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

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

Basically it grabs the first row of the #firsttable and counts the number of columns. Then it finds the corresponding percentage width for that number of columns. Then it applies that width to all <td>elements.

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

This will work as long as there are no colspandefined on the tds, which would throw off the column count. The columns will be equal since you've defined an explicit width on both tables.

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

回答by Nilesh Mahajan

Table cell width is dependent on its content if the width is not given via style.

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

By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.

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

If you want to have an exact width to table cells of different tables then first understand the following description.

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

Table and column widths are set by the widths of the table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths. Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

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

CSS

CSS

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

for more information https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

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

回答by NoNaMe

Define any css class and format the it and then use that class on both the tables e-g

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

your temp.css

你的 temp.css

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

and in HTML file

并在 HTML 文件中

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

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

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

回答by CletusW

You can sync the column widths by combining the tables with a tbodyfor each (as suggested by @Relequestual), and using <th scope="rowgroup">for the headers:

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

Source: Example in the HTML spec itself

来源：HTML 规范本身中的示例