CSS-换行优先级



我有一个有3列的表

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

结果是最后一列先包装其内容,然后包装描述列。我希望"描述"列先换行。我尝试添加空白:nowrap,但Actions列从未换行。

浏览器如何决定要换行的列?

我希望第3列是最后一个结束的。因此,在Description列被完全包装之前,它应该在一行上显示按钮。当没有更多空间时,列可以换行。

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

列在表中按降序包装文本。因此,您只需要固定最后一列的宽度。

如果你想让它在小屏幕中再次换行,只需添加一个媒体查询(请参阅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>

给第一列和最后一列一个宽度。然后,中心布局将采用所有剩余布局,并在需要时包装其内容。

请参阅规范中的自动表格布局部分:

列宽确定如下:

  1. 计算每个单元格的最小内容宽度(MCW):格式化的内容可以跨越任意行数,但不能溢出电池盒。如果指定的单元格"宽度"(W)大于W是最小单元宽度。值"auto"表示MCW是最小单元宽度。

  2. 此外,计算每个单元格的"最大"单元格宽度:格式化内容时不打断除显式行之外的其他行发生断裂。

  3. 对于每一列,从仅跨越该列的单元格中确定最大和最小列宽。最低要求为最小单元格宽度最大的单元格(或列"宽度",以较大者为准)。最大值是具有最大单元格宽度的单元格(或列"宽度",以较大者为准)。

  4. 对于跨越多个列的每个单元格,增加其跨越的列的最小宽度,使它们加在一起至少为宽如细胞。对最大宽度执行相同操作。如果可能的话,将所有跨度柱加宽大约相同的量。

  5. 对于"width"不是"auto"的每个列组元素,增加其所跨列的最小宽度,以便它们的宽度至少与列组的"宽度"一样宽。

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

字幕宽度最小值(CAPMIN)是通过计算每个字幕的最小字幕外部宽度为假设的表格单元格,包含格式化为"显示:块"。最小字幕外部宽度中的最大值为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不需要实现该算法。

因此,该行为依赖于实现

最新更新