CSS - 包装优先级

Question

我有一个有3列的表

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

会发生什么是最后一列首先包装其内容,然后是描述列.我想首先包装Description列.我尝试添加white-space:nowrap但是Actions列永远不会包装.

浏览器如何确定要包装的列？

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

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

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>