bootstrap表格内容过长时用省略号表示的解决方法
更新时间：2017年11月21日 15:35:07 作者：彩笔_小qing
这篇文章主要介绍了bootstrap表格内容过长时用省略号表示的解决方法,需要的朋友可以参考下
首先 ，bootstrap中当td内容超过我给的固定宽度时，省略号代替的代码如下：
<table class="table table-bordered">
<thead>
<tr>
<th class="center" style='width:38%;'>商品名称</th>
<th class="center" style='width:36%;'>详细介绍</th>
<th class="center" style='width:22%;'>购买数量</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>自由行机票享超值优惠</td>
<td>随心所欲安排行程</td>
<td>70</td>
</tr>
<tr>
<td>自由行机票享超值优惠</td>
<td>随心所欲安排行程</td>
<td>70</td>
</tr>
<tr>
<td>自由行机票享超值优惠</td>
<td>随心所欲安排行程</td>
<td>70</td>
</tr>
</tbody>
</table>
.table tbody tr td{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
移动端模拟器显示效果是这样的。不是很舒服,完全没按我给他的宽度显示，全靠内容挤出来的。
解决方法：
<table class="table table-bordered" style='table-layout:fixed;'>
也就是添加样式
table{
table-layout:fixed;
}
效果出现：
table-layout用来显示表格单元格、行、列的算法规则。值 描述
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。
总结
以上所述是小编给大家介绍的bootstrap表格内容过长时用省略号表示的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript时间转换处理函数的方法的相关资料,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了javascript实现网页倒计时数字时钟效果，是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下2016-03-03
在线编辑器的实现原理(兼容IE和FireFox)...2007-03-03
这篇文章主要为大家详细介绍了用JS实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了微信小程序与h5的相互跳转场景分析,在微信小程序内编写webview文件,通过webview去跳转h5,loadUrl为h5的地址,非嵌套,h5需要跳转打开某个微信小程序,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了简单实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
本文给大家分享一段超级全面的二代身份证号码验证程序，由JS编写而成，可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。2014-11-11
JavaScript实现图片本地预览功能【不用上传至服务器】
这篇文章主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了微信小程序实现两边小中间大的轮播效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了JS实现的四叉树算法,简单分析了四叉树的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下2018-12-12
最新评论