设置 Html table 'tr' 宽度，使一行中的每个单元格具有不同的宽度

Question

我有以下 table 声明：

<table width="80%" style="border: 1px solid black; border-collapse: collapse; table-layout: fixed;">
<tbody>
<tr>
<td style="border: 1px solid black; border-collapse: collapse;" width="80%" colspan="2" >This is a very long first line here, taking the entire width of the table</td>
</tr>
<tr>
<td style="border: 1px solid black;" width="10%">Comment</td>
<td style="border: 1px solid black;" width="80%">My text on the comment cell</td>
</tr>
</tbody>
</table>

我不明白为什么我的第二列和第一列一样宽。我认为通过为 table 指定 table-layout: fixed; 属性并设置列宽，我会得到我想要的，即：

第一行只有一个单元格，其宽度为 table 宽度的 100%
第二行，第一个单元格较小，第二个单元格较宽

Answer 1

table-layout: fixed 允许您设置每个 <th> 的宽度或 <tbody> 中 <td> 的第一行的宽度（如果没有 <thead>）。一旦确定了宽度，每列将符合这些宽度。这是专栏的性质。如果你想每行有不同的宽度，试试 colspan.

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

table,
th,
td {
  border: 3px solid black;
}

th {
  width: 25%
}

<table>
  <thead>
    <tr>
      <th>I</th>
      <th>II</th>
      <th>III</th>
      <th>IV</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan='4'>colspan="4"</td>
    </tr>
    <tr>
      <td></td>
      <td colspan='3'>colspan="3"</td>
    </tr>
    <tr>
      <td colspan='2'>colspan="2"</td>
      <td colspan='2'>colspan="2"</td>
    </tr>
  </tbody>
</table>

Answer 2

在固定的table布局中，当table的第一行无法描述各个列的宽度时，您需要使用col元素来定义这些宽度。所以：

table {
  width: 80%;
  border-collapse: collapse; 
  table-layout: fixed;
}
col:nth-child(1) {
  width: 20%;
}
col:nth-child(2) {
  width: 80%;
}
td {
  border: 1px solid black;
}

  <table>
    <col><col>
    <tbody>
      <tr>
        <td colspan="2">This is a very long first line here, taking the entire width of the table</td>
      </tr>
      <tr>
        <td>Comment</td>
        <td>My text on the comment cell</td>
      </tr>
    </tbody>
  </table>

设置 Html table 'tr' 宽度，使一行中的每个单元格具有不同的宽度

Setting a Html table 'tr' width to have a different width for each cell on one row

html

html-table