如何让一个表格列填满所有空闲的水平空间？答案

【问题标题】：How do I make one table column fill all the spare horizontal space?如何让一个表格列填满所有空闲的水平空间？
【发布时间】：2011-10-31 14:28:13
【问题描述】：

我有一个由 3 列组成的 HTML 表格。它的宽度固定为 600 像素。

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

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

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

【问题讨论】：

您尝试过使用 nowrap 吗？ w3schools.com/tags/att_td_nowrap.asp 。请注意，该属性已弃用，应与 css 一起使用，如那里指定的那样
这并不能解决我的主要问题，即其他两个单元格太宽，而不是太窄。但随着兰塔的回答，这正是我要找的，谢谢

标签： html css html-table

【解决方案1】：

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

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

【讨论】：

这很好用，只要我在其他单元格上使用 nowrap。我现在想起来有点愚蠢。谢谢
宽度属性也被弃用了，应该改用css：w3schools.com/tags/att_td_width.asp
在 Firefox 中运行良好。在 Webkit 浏览器中，这将挤压没有明确设置宽度的图像。
你是个天才。这让我发疯了。
请注意，这不适用于表格布局：已修复。使用固定的表格布局，该列实际上将获得 100% 的宽度。

【解决方案2】：

你可以使用 max-width:99%;在第一列上并在其他列上给出固定大小（我使用像素大小的列）。

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

【讨论】：