HTML表格格式：2个colspan单元弄乱了列宽

Question

假设我有以下HTML：

<table>
  <tr>
    <th>Heading:</th><td>text</td>
  </tr>
  <tr>
    <th>Heading 2:</th><td>text</td>
  </tr>
  <tr>
    <th colspan="2">Really long heading:</th>
  </tr>
  <tr>
    <td></td><td>text</td>
  </tr>
</table>

这将创建一个包含两列的表，其中一列用于标题（左），一列用于值（右）-除了一行以外，其中长标题占据了两列，并且该值显示在下一列的最右侧行。 除此之外，我还有一些样式。 最重要的是：

td:last-child {
  width: 100%;
}

th, td {
    white-space:nowrap;
}

这样一来，最右边的列将占用任何额外的空间。 即使“真正长”的标题比标题列长/宽，我所拥有的也正在工作。 但是，当我在真正的长标题中添加更多单词（但又没有使其足够长以增加整个表的宽度）时，在某一点之后，左列的宽度开始随着long的长度而增加标题，减小右列的宽度。 这是怎么回事？

Answer 1

您无法定义宽度：具有多列的表格单元格的100％。 您应该使用colgroup标记来定义单元格的宽度：

 .col-left { width: 20%; } .col-right { width: 80%; } 

  <table> <colgroup> <col class="col-left"> <col class="col-right"> </colgroup> <tr> <th>Heading:</th><td>text</td> </tr> <tr> <td colspan="2">Really long heading:</td> </tr> <tr> <th>lorem ispum dolores hello</th><td>text</td> </tr> </table> 

将一个单元格设置为最小值的另一个技巧是，将另一个单元格占用其余的宽度，这是将第一个单元格设置为1px：

 table { width: 200px; } th, td { border: 1px solid #000; } th { width:1px; } 

 <table> <tr> <th>hello</th> <td>world</td> </tr> <tr> <td colspan="2">hi</td> </tr> <tr> <td></td> <td>text</td> </tr> </table>