两列表:一列尽可能小,另一列则剩余

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

给内容td100%的宽度将迫使它占用尽可能多的空间,所以.content{ width: 100% }应该工作.

同时给出.action a 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>

Answer 2

设置列width: 1px和white-space: nowrap.

这将尝试使其为1px,但now​​rap将阻止它变得小于该列中最宽的元素.

Answer 3

当我试图使一列中的一列尽可能小时,我找到了这个答案.

给内容td1%width将迫使它占用尽可能少的空间,因此.content{ width: 1% }对我有用.