Html 如何让一个表格列填满所有空闲的水平空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7138605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make one table column fill all the spare horizontal space?
提问by gsteinert
I have a HTML table consisting of 3 columns. It has a fixed width of 600px.
我有一个由 3 列组成的 HTML 表。它的固定宽度为 600px。
<table>
<tr>
<td>Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and the Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.
我希望 Qty 和 Actions 列尽可能小（将内容保持在一行），而 Name 列占据剩余的可用空间。数量和操作列的大小根据内容/字体大小而变化，因此在这种情况下固定宽度将不起作用。
Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?
有没有办法在 HTML/CSS 中做到这一点？或者这是我需要打破 Javascript 的东西吗？
回答by Ranta
You can apply width="99%" on that column. For example:
您可以在该列上应用 width="99%"。例如：
<table>
<tr>
<td width="99%">Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
回答by Loic Lacomme
you can use max-width:99%; on the first column and give fixed sizes on the other columns (I used pixels sized columns).
你可以使用 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>
