HTML 表格 last td 占用剩余宽度

Question

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

这是我的:

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

整个表格宽度是 100%(如我所愿)，但我不知道如何调整 TD 宽度来实现我的目标。

Answer 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>