CSS - 包裹优先级

Question

我有一个有三列的表格

**********************************************************
*  Name        *     Description               * Actions *
**********************************************************
*  John        * Lorem ipsum bla bla etc eetc  *   B1    *
*              *                               *   B2    *
**********************************************************

发生的情况是最后一列先换行其内容，然后是描述列。我希望描述列先换行。

我尝试添加 white-space: nowrap 但这时操作列永远不会换行。

浏览器如何决定哪一列要换行？

我希望第三列是最后一个换行的。因此，在描述列完全换行之前，它应该在单行上显示按钮。当没有更多空间可用时，该列可以换行。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');

<table class="table">
  <thead>
    <tr>
      <th>Entity</th>
      <th>ID</th>
      <th>Description</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer</td>
      <td>9004</td>
      <td>null, asdjkajk, kkkjk, kjkk, kkk, 898989</td>
      <td>
        <button class="btn c-btn">
          <span class="glyphicon glyphicon-pencil"></span>
        </button>
        <button class="btn c-btn">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

- algiogia

---

请与我们分享您的HTML和CSS代码。或者更好的是在JSFiddle上重现问题。 - GreyRoofPigeon

你在用什么来做这个？这些是浮点数吗？你在使用css框架吗？如果你能够发布一个fiddle或其他东西，回答你的问题会更容易。如果不知道你如何实现这些列，那就有点太开放了。 - ajmajmajma

尝试增加最后一列的宽度。 - Panther

你发布的JSFiddle中有很多无关的细节，包括非标准属性和嵌入式图像。尝试提供一个“最小、完整和可验证的示例”，这样你就可以测试不同的解决方案，而不会因为额外的样式使其难以理解。 - IMSoP

你说第三列不应该首先换行，但你希望它永远不要换行。那么什么时候应该换行呢？ - Oriol

Answer 1

表格中的列按递减顺序包装其文本。因此，您只需要调整最后一列的宽度。

如果您希望在小屏幕上再次换行，请添加一个媒体查询（请参阅CSS），将其宽度重置为自动，并为该列赋予其优先级以进行换行。

table{
  width:300px;
}

td{
  border:1px solid black;
}

table>tr>td:last-child{
  width:40px;
}

@media (max-width: 200px) {
  table>tr>td:last-child{
    width:auto;
  }
}

<table>
  <tr>
    <td>Col1</td>
    <td class="cc">Description</td>
    <td>Actions</td>
  </tr>
  <tr>
    <td>John</td>
    <td class="cc">Lorem ipsum bla bla black test long text</td>
    <td>BA AB</td>
  </tr>
</table>

- BassMHL

---

我将使用媒体查询来设置第三列在大屏幕上的 "white-space: nowrap" 和在小屏幕上的 "white-space: normal"。 - algiogia

Answer 2

给第一列和最后一列设置宽度。中间的布局将占据剩余的布局，并在需要时包裹其内容。

- tribe84

---

如果屏幕变得太小，我需要最后一列缩小，但是在第二列换行之后。 - algiogia

那么只需将宽度添加到最后一列，让表格处理其余的重新调整大小，或者您最终还需要减小最后一列吗？如果您正在使用响应式框架，则还应该有一些可用于帮助调整大小的类。我认为在那之后您就没有太多控制权了。 - tribe84

Answer 3

请参见规范中的自动表格布局部分：

列宽的确定如下：

1. 计算每个单元格的最小内容宽度（MCW）：格式化的内容可以跨越任意数量的行，但不得溢出单元格框。如果单元格的指定'width'（W）大于MCW，则W是最小单元格宽度。'auto'的值意味着MCW是最小单元格宽度。

2. 还要计算每个单元格的“最大”单元格宽度：在除了显式换行符处以外的位置格式化内容而不断行。

3. 对于每一列，从仅跨越该列的单元格中确定最大和最小列宽。最小值是具有最大最小单元格宽度（或列'width'中较大者）所需的值。最大值是由具有最大最大单元格宽度（或列'width'中较大者）的单元格所需的值。

4. 对于跨越多个列的每个单元格，增加其跨越的列的最小宽度，使它们的总宽度至少与单元格宽度相同。对于最大宽度也是如此。如果可能，将所有跨度列大致扩展相同的量。

5. 对于具有除'auto'之外的'width'的每个列组元素，增加它所跨越的列的最小宽度，使它们的总宽度至少与列组的'width'相同。

这为每一列提供了最大和最小宽度。

标题宽度最小值（CAPMIN）通过计算每个标题的最小标题外宽度来确定，该宽度是包含以“display: block”格式化的标题的虚拟表单元格的MCW。最小标题外宽度中的最大值是CAPMIN。

列和标题宽度如下影响最终表格宽度：

1. 如果'table'或'inline-table'元素的'width'属性具有计算值（W），而不是'auto'，则使用的宽度是W、CAPMIN和所有列加上单元格间距或边框所需的最小宽度（MIN）中的较大值。如果使用的宽度大于MIN，则应将额外的宽度分配到列中。

2. 如果'table'或'inline-table'元素具有'width: auto'，则使用的宽度是表格包含块宽度、CAPMIN和MIN中的较大值。但是，如果CAPMIN或列加上单元格间距或边框所需的最大宽度（MAX）中的任何一个小于包含块的宽度，则使用max（MAX，CAPMIN）。

请注意，它说：

如果使用的宽度大于MIN，则应将额外的宽度分配到列上。

然而，它没有说明应该如何分配。

此外，该算法不是规范性的：

此算法反映了本规范撰写时几个流行的HTML用户代理的行为。UA不需要实现此算法。

因此，行为取决于实现。

- Oriol