Question

我有一个包含3列的表

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

最后一列首先包装其内容，然后是描述列。我想首先包装Description列。我尝试添加white-space：nowrap，但是Actions列从不包装。

浏览器如何确定要换行的列？

我希望第3列成为最后一个包装。因此，在描述列完全包装之前，它应该在一行上显示按钮。当柱子没有更多空间时，可以包裹。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

为第一列和最后一列指定宽度。然后，中心布局将采用所有剩余的布局，并在需要时包装其内容。

Answer 2

列在表格中按降序包装文本。所以你只需要修复最后一列的宽度。

如果您希望它再次在小屏幕中换行，只需添加一个媒体查询（请参阅CSS）将其宽度重置为自动，并将其列为优先包装。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

请参阅规范中的automatic table layout部分：

列宽如下确定：



计算每个单元格的最小内容宽度（MCW）：格式化的内容可能跨越任意数量的行但可能不会溢出   细胞盒。如果单元格的指定'width'（W）更大   与MCW相比，W是最小单元宽度。值'auto'意味着   MCW是最小单元宽度。



此外，计算每个单元格的“最大”单元格宽度：格式化内容而不会破坏除显式行之外的行   发生了休息。



对于每列，确定仅跨越该列的单元格的最大和最小列宽。最低要求是   具有最大单元格宽度（或列）的单元格   'width'，以较大者为准）。最大值是   具有最大单元格宽度（或列）的单元格   'width'，以较大者为准。）



对于跨越多个列的每个单元格，增加它跨越的列的最小宽度，以便它们一起至少为   像细胞一样宽。对最大宽度执行相同操作。如果可能的话，   扩大所有跨栏列的数量大致相同。



对于“宽度”不是“自动”的每个列组元素，增加它跨越的列的最小宽度，以便一起   它们至少与列组的“宽度”一样宽。


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

标题宽度最小值（CAPMIN）通过计算来确定   每个标题的最小标题外部宽度为a的MCW   包含格式为的标题的假设表格单元格   “显示：阻止”。最小字幕外部宽度的最大值是   CAPMIN。

列和标题宽度会影响最终的表格宽度，如下所示：


如果'table'或'inline-table'元素的'width'属性具有除'auto'以外的计算值（W），则使用的宽度为   更大的W，CAPMIN，以及所有的最小宽度   列加单元格间距或边框（MIN）。如果使用的宽度是   大于MIN，额外宽度应分布在   列。

如果'table'或'inline-table'元素的'width：auto'，则使用的宽度是表的包含块宽度中的较大者，   CAPMIN和MIN。但是，如果是CAPMIN或最大宽度   列加上单元格间距或边框（MAX）所需的更少   而不是包含块，使用max（MAX，CAPMIN）。

请注意

如果使用的宽度大于MIN，则应增加额外宽度分布在列上。

但是，它没有具体说明应如何分发。

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

该算法反映了几个流行的HTML用户的行为代理人在撰写本规范时。 UAs不是必需的实现这个算法。

因此，行为依赖于实现。

CSS - 包装优先级

3 个答案: