首页 > 其他 > 详细

table中td内容过长 省略号显示

时间:2017-01-12 18:42:41      阅读:34      评论:0      收藏:0      [点我收藏+]

标签:tab   fix   trap   nowrap   自动   -s   nbsp   ips   css   

首先设置 css样式:

    table { table-layout: fixed;}

HTML中的table代码:

<tr>
<th class="col-md-1">用户ID</th>
<th class="col-md-1">用户名</th>
<th class="col-md-1">联系电话</th>
<th class="col-md-1">邮箱</th>
<th class="col-md-4">描述 </th>
<th class="col-md-2">添加时间</th>
<th class="col-md-2">操作</th>
</tr>
【对于bootstrap应该设置th的固定宽度】

设置td超过固定宽度自动显示为省略号:
table tr td {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}

table中td内容过长 省略号显示

标签:tab   fix   trap   nowrap   自动   -s   nbsp   ips   css   

原文:http://www.cnblogs.com/miny-simp/p/6279185.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号