web-dev-qa-db-ja.com

2列のテーブル：1つは可能な限り小さく、もう1つは残りを占めます

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%;
}

しかし、左の列はテーブルの半分を占めます...

htmlcsshtml-tableautosize
45
Julien

コンテンツ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>
38
Stephan Muller

列を設定するwidth: 1pxおよびwhite-space: nowrap。

これは1pxにしようとしますが、nowrapはその列の最も広い要素よりも小さくならないようにします。

20
Kirk Douglas Jr

この回答は、1列に多数の（できるだけ小さい）を作成しようとしたときに見つかりました。

コンテンツtdに1％widthを与えると、可能な限り少ないスペースを使用するように強制されるので、.content{ width: 1% }は私のために働きました。

15
samjewell