59

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

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

4

4 に答える 4

49

コンテンツtdの幅を 100% にすると、できるだけ多くのスペースが必要になるため、機能する.content{ width: 100% }はずです。

また、.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>

于 2010-12-12T21:56:53.540 に答える
16

多くの列をできるだけ小さくしようとしたときに、この答えを見つけました。

コンテンツtdに 1%widthを指定すると、必要なスペースをできるだけ少なくすることができるので、.content{ width: 1% }うまくいきました。

于 2016-06-08T14:20:41.603 に答える