bootstrap表格内容过长时用省略号表示的解决方法


Posted in Javascript onNovember 21, 2017

首先 ,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; 
 }

移动端模拟器显示效果是这样的。不是很舒服,完全没按我给他的宽度显示,全靠内容挤出来的。

bootstrap表格内容过长时用省略号表示的解决方法 

解决方法:

<table class="table table-bordered" style='table-layout:fixed;'>

也就是添加样式

table{
 table-layout:fixed;
}

效果出现:

bootstrap表格内容过长时用省略号表示的解决方法

table-layout用来显示表格单元格、行、列的算法规则。值 描述

automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。

总结

以上所述是小编给大家介绍的bootstrap表格内容过长时用省略号表示的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jquery滚动特效集锦
Jun 03 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 #Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 #Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 #Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
php 文本文件的读取效率
2012/02/10 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python开启多个子进程并行运行的方法
2015/04/18 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python中关于数据类型的学习笔记
2020/07/19 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
工程开工庆典邀请函
2014/02/01 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
入党综合考察材料
2014/06/02 职场文书
阅兵口号
2014/06/19 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python