Divにto-columnsテーブルがあります:
<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>
そして、「アクション」列がコンテンツに適合し、「コンテンツ」列が残りの利用可能なスペースを占めるようにしたいと思います。 「アクション」列は、右揃えで見栄えがよくなります。また、テーブルはコンテナの幅の100%に収まる必要があります。
列の幅を固定せずにこれを行う方法はありますか?
私はこれで試しました:
table .action
{
width:auto;
text-align:right;
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
}
しかし、左の列はテーブルの半分を占めます...
コンテンツtd
を100%の幅にすると、コンテンツは可能な限り多くのスペースをとるようになるため、.content{ width: 100% }
は動作するはずです。
また、.actionにwhite-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>
列を設定するwidth: 1px
およびwhite-space: nowrap
。
これは1pxにしようとしますが、nowrapはその列の最も広い要素よりも小さくならないようにします。
この回答は、1列に多数の(できるだけ小さい)を作成しようとしたときに見つかりました。
コンテンツtd
に1%width
を与えると、可能な限り少ないスペースを使用するように強制されるので、.content{ width: 1% }
は私のために働きました。