HTML table last td 取剩余宽度答案

【问题标题】：HTML table last td to take remaining widthHTML table last td 取剩余宽度
【发布时间】：2019-03-26 03:13:16
【问题描述】：

我有一张桌子，上面有一个 TR 和 2 个 TD。我希望第一个 TD 根据其内容自动调整宽度，第二个 TD 用完剩余的宽度。

这就是我所拥有的：

<table style="width: 100%;">
  <tr>
    <td>short content</td>
    <td>long content</td>
  </tr>
</table>

整个表格宽度为 100%（如我所愿），但我不知道如何调整 TD 宽度以实现我的目标。

【问题讨论】：

标签： html css html-table

【解决方案1】：

你可以给第一个td 一个小宽度，例如1px，与white-space: nowrap;

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid red;
}
td:first-child {
  width: 1px;
  white-space: nowrap;
}

<table>
  <tr>
    <td>short content</td>
    <td>long content</td>
  </tr>
</table>

或者，给最后一个td 一个较大的宽度，例如100%.

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid red;
}
td:first-child {
  white-space: nowrap;
}
td:last-child {
  width: 100%;
}

<table>
  <tr>
    <td>short content</td>
    <td>long content</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

在除最后一个单元格之外的所有单元格上设置white-space: nowrap，并为最后一个单元格设置 100% 宽度，对我有用：

    td:not(:last-child), th:not(:last-child) {
      white-space: nowrap;
    }

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

这将确保文本换行仍然有效，同时在空间可用时仍然填充表格。

【讨论】：