如何让一个表列填满所有多余的水平空间？

Question

我有一个包含 3 列的 HTML 表格。它的宽度固定为 600px。

 <table>
  <tr>
    <td>Name</td>
    <td>Qty</td>
    <td>Actions</td>
  </tr>
</table>

我希望 Qty 和 Actions 列尽可能小（将内容保持在一行），而 Name 列占用剩余的可用空间。 Qty 和 Actions 列的大小根据内容/字体大小而变化，因此固定宽度在这种情况下不起作用。

有没有办法在 HTML/CSS 中做到这一点？或者这是我需要打破 Javascript 的东西吗？

原文由 gsteinert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在该列上应用 width=“99%“。例如：

 <table>
  <tr>
    <td width="99%">Name</td>
    <td>Qty</td>
    <td>Actions</td>
  </tr>
</table>

原文由 Ranta 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以使用最大宽度：99%；在第一列上并在其他列上给出固定大小（我使用像素大小的列）。

 <table style="width: 100%;">
  <tr>
    <td style="max-width: 99%">
      Will max
    </td>
    <td style='width:110px;'>
      fixed size here
    </td>
  </tr>
</table>

原文由 Loic Lacomme 发布，翻译遵循 CC BY-SA 3.0 许可协议