Html 两列表格：一个尽可能小，另一个拿剩下的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4424245/
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
Two columns table : one as small as possible, the other takes the rest
提问by Julien
I have a to-columns table in a div :
我在 div 中有一个到列的表：
<div>
<table>
<tbody>
<tr>
<td class="action" >
<a> ? </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ? </a><a> ? </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
... same structure in all the table
</tbody>
</table>
</div>
And I would like the "action" column to fit the content, and the "content" column to take the rest of available space. The "action" column would look better with a right align. The table should also fit 100% of the container's width.
我希望“操作”列适合内容，而“内容”列则占用剩余的可用空间。“动作”列在右对齐时看起来会更好。该表格还应适合容器宽度的 100%。
Is there a way of doing this without fixing the columns width ?
有没有办法在不固定列宽的情况下做到这一点？
I tried with this:
我试过这个：
table .action
{
width:auto;
text-align:right;
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
}
But the left column takes half of the table...
但是左列占据了表格的一半......
采纳答案by Stephan Muller
Giving the content tda 100% width will force it to take as much space as it can, so .content{ width: 100% }should work.
为内容td提供 100% 的宽度将迫使它尽可能多地占用空间，因此.content{ width: 100% }应该可以工作。
Also give the .action a white-space: nowrapto make sure the x and the checkmark stay next to each other. Otherwise the content will be able to take even more space and force the icons below each other.
还给 .action awhite-space: nowrap以确保 x 和复选标记保持彼此相邻。否则，内容将能够占用更多空间并迫使图标彼此下方。
table .action
{
width:auto;
text-align:right;
white-space: nowrap
}
table .content {
width: 100%
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
border: 1px solid
}<table>
<tbody>
<tr>
<td class="action" >
<a> ? </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ? </a><a> ? </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
</tbody>
</table>回答by Kirk Douglas Jr
Set the column width: 1pxand white-space: nowrap.
设置列width: 1px和white-space: nowrap。
This will try to make it 1px, but the nowrap will stop it from getting smaller than the widest element in that column.
这将尝试使其为 1px，但 nowrap 将阻止它变得小于该列中最宽的元素。
回答by samjewell
I found this answer when trying to make one column of many as small as possible.
我在尝试使一列尽可能小时找到了这个答案。
Giving the content tda 1% widthwill force it to take as little space as it can, so .content{ width: 1% }worked for me.
给内容td1%width将迫使它占用尽可能少的空间，所以.content{ width: 1% }对我有用。
