我有一个有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>