html – CSS – 包装优先级

前端之家收集整理的这篇文章主要介绍了html – CSS – 包装优先级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个有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>

解决方法

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

如果你想让它在小屏幕中再次换行,只需添加一个媒体查询(参见CSS)将它的宽度重置为auto,并给columng优先包装.

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>
原文链接:https://www.f2er.com/html/226862.html

猜你在找的HTML相关文章