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>

Answer 2

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

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

Answer 3

我尝试将一列尽可能小的>时找到了这个答案。

将内容td赋予1％width将迫使其占用尽可能少的空间，因此.content{ width: 1% }为我工作。

Answer 4

执行此操作的 bootstrapian 方式：

<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 大列（相同的编号规则）

两列表：一列尽可能小，另一列则剩余

4 个答案: