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 回答
28

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

这将尝试使其为 1px，但 nowrap 将阻止它变得小于该列中最宽的元素。

于 2017-04-05T02:53:22.307 回答
16

我在尝试使一列尽可能小时找到了这个答案。

给内容td1%width将迫使它尽可能少地占用空间，所以.content{ width: 1% }对我有用。

于 2016-06-08T14:20:41.603 回答
1

这样做的引导方式：

<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大尺寸的列（相同的编号规则）
于 2021-06-08T21:22:13.840 回答