两列表:一个尽可能小,另一个取其余 [英] Two columns table : one as small as possible, the other takes the rest
问题描述
我在div中有一个to-columns表:
I have a to-columns table in a 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>
我想action列适合内容,content列占用剩余的可用空间。 动作列将看起来更好与右对齐。
表格也应该符合容器宽度的100%。
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.
有没有办法固定列宽度?
Is there a way of doing this without fixing the columns width ?
我试过这个:
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...
推荐答案
给内容 td
一个100%的宽度将迫使它占用尽可能多的空间因为它可以,所以 .content {width:100%}
应该工作。
Giving the content td
a 100% width will force it to take as much space as it can, so .content{ width: 100% }
should work.
还要给.action a white-space:nowrap
,以确保x和复选标记保留在彼此。
Also give the .action a white-space: nowrap
to 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.
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>
这篇关于两列表:一个尽可能小,另一个取其余的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!