两列表格：一列尽可能小，另一列占据剩余空间。

Question

我在一个 div 中有一个两列的表：

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

但左侧列占据了表格的一半空间...

- Julien

Answer 1

给内容中的td设置100%的宽度将强制其尽可能占用空间，所以应该使用.content{ width: 100% }。

此外，给 .action 添加 white-space: nowrap 以确保 "x" 和 "checkmark" 保持在一起。否则，内容将能够占用更多的空间并强制图标彼此堆叠。

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>

- Stephan Muller

---

有没有一种方法可以不使用表格，而是使用div来实现相同的效果？ - Atmocreations

当然可以，只需使用 display: table-cell 属性（也许还要在它们周围的 div 上使用 display: table-row）即可使它们表现得像一个表格。 - Stephan Muller

Answer 2

将列宽度设置为1像素并加入white-space: nowrap样式。

这将尝试使其宽度为1像素，但nowrap会阻止其缩小到该列中最宽的元素以下。

- Kirk Douglas Jr

---

现在（2021年），将宽度设置为0效果更好。 - Katinka Hesselink

Answer 3

当我想让多列中的一列尽可能地小时，我找到了这个答案。

给td的内容一个1%的width将强制它尽可能地占据少的空间，所以.content{ width: 1% }对我有用。

- samjewell

---

我不确定，但我认为它不符合要求：列应尽可能小，但内容应该可见。看起来使用1％或1像素的列不起作用。 - Julien

我认为问题在于你说要将内容列设置为1％，而实际应该是动作列。我认为你的想法很好，只是搞混了，但这并不应该导致投票否决，只需要进行更正即可。你的方法的一个优点是，在某些情况下它可能会更好地处理。如果有2列，则接受的100％答案可以使用。但是如果有4列，并且您希望前3列自动调整其宽度，而第4列应尽可能小，则1％的方法可以使用，而100％则无法使用。 - ldkronos

另外，您没有考虑到这两个图标，您几乎肯定希望它们并排而不是一个在另一个上面，因此您需要执行nowrap（就像接受的答案一样）。 - ldkronos

我也需要尽可能减少列占据的水平空间。它们包含订单索引、复选框或按钮。我以width: 1%为起点，但我在我的类中添加了white-space: nowrap;来增强它。这在Chrome、IE上似乎效果很好。 - gregsonian

Answer 4

这是使用Bootstrap的方法：

<div class="row">
    <div class="col-sm-1"> content... </div>
    <div class="col"> content... </div>
</div>

基本上，您需要尝试不同的事情，记住以下内容：

• col-sm 小型列
• col-sm-1 最小的列
• col-sm-2 稍微比最小的列大一点（数字从1到12）
• col-md 中等大小的列（相同的编号规则）
• col-lg 大型列（相同的编号规则）

- Ali Sajjad