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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js获取Get值的方法
Sep 29 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 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
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
js中new一个对象的过程
2017/02/20 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
vue axios封装及API统一管理的方法
2019/04/18 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python从入门到精通(DAY 1)
2015/12/20 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python如何输出警告信息
2020/07/30 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
领班岗位职责范文
2014/02/06 职场文书
海飞丝的广告词
2014/03/20 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
民主生活会剖析材料
2014/09/30 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
企业投资意向书
2015/05/09 职场文书
教师外出学习心得体会
2016/01/18 职场文书
《确定位置》教学反思
2016/02/18 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers