html - 两列表 : one as small as possible, 其余占

Question

我在 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>

我希望“action”列适合内容，“content”列占用剩余的可用空间。如果右对齐，“action”列看起来会更好。表格还应适合容器宽度的 100%。

有没有办法在不固定列宽的情况下做到这一点？

我试过这个:

table .action
{
    width:auto;
    text-align:right;
}
table 
{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
}

但是左边的列占了表格的一半...

Answer 1

给内容 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>