html - HTML表格的最后td采用剩余宽度

我有一个表有一个tr和两个td，我希望第一个td根据内容自动调整宽度，第二个td使用剩余的宽度。
这就是我所拥有的：

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

整个桌子的宽度是100%（如我所愿），但我不知道如何调整TD宽度来达到我的目标。

最佳答案

你可以给第一个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>

关于html - HTML表格的最后td采用剩余宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38162482/