大佬教程收集整理的这篇文章主要介绍了html – CSS – 包装优先级，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
********************************************************** * 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>
以上是大佬教程为你收集整理的html – CSS – 包装优先级全部内容，希望文章能够帮你解决html – CSS – 包装优先级所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。