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;
}

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

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>