商品名称 详细介绍" />
当前位置:首页 > 日记 > 正文

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

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表格内容过长时用省略号表示的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

cdr怎么导出透明背景的?

cdr怎么导出透明背景的?

透明背景,电脑软件,cdr,cdr中想要制作透明背景的图片,该怎么制作呢?下面我们就来看看详细的制作方法。软件名称:CorelDRAW X8 64位 简体中文安装免费版(附序列号)软件大小:547.9MB更新时间:2016-11-231、打开要导出透明图片的文件。如果背景不是…

2010版ppt怎么嵌入特殊字体

2010版ppt怎么嵌入特殊字体

字体,方法,电脑软件,ppt,  之前说了如何嵌入特殊字体以方便在没有该字体的电脑上显示完整的ppt样式,那么问题来了,有的情况会提示无法嵌入字体,要怎么解决呢?其实小编有方法解决,下面给大家分享ppt2010嵌入特殊字体的方法,不懂的朋友会请多多…

echarts学习笔记之箱线图的分析与

echarts学习笔记之箱线图的分析与

绘制,线图,详解,学习笔记,电脑软件,一、箱线图 Box-plot箱线图(Boxplot)也称箱须图(Box-whisker Plot),它是用一组数据中的最小值、第一四分位数、中位数、第三四分位数和最大值来反映数据分布的中心位置和散布范围,可以粗略地看出数据是否具有对…

js调用刷新界面的几种方式

js调用刷新界面的几种方式

刷新,调用,界面,几种,方式,有的时候需要手动调用来刷新界面,比如非动态切换的语言模式啊,风格样式啊什么的。<!DOCTYPE html><html> <head> <meta charset='utf-8'> </head> <body> <button onclick="click1()">location.reload();</but…

JS获取一个表单字段中多条数据并转

JS获取一个表单字段中多条数据并转

表单,字段,数据,多条,格式,如图需要获取下面两个li标签里面的数据,然后传给后台;而后台接收的数据格式是json的,所以需要把两个li里面的信息转化为以下格式的。{recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieve…

经典令人心痛伤感个性签名集锦

经典令人心痛伤感个性签名集锦

心痛,个性签名,经典,伤感,集锦,  有些人的经历多了,看到很多心痛伤感的事情,用一些文字表达内心的心痛伤感的情绪,以下是小编为大家收集整理的《经典令人心痛伤感个性签名》全部内容,如果您喜欢小编的推荐,请继续关注。经典令人心痛伤感个性签…

vue引入jq插件的实例讲解

vue引入jq插件的实例讲解

插件,实例,电脑软件,vue,jq,今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个…

怎么设置ppt2013不自行压缩设置ppt

怎么设置ppt2013不自行压缩设置ppt

压缩,设置,方法,电脑软件,  PPT制作是信息时代下的产物,是当前办公室普遍应用的一种软件,不管用于教学还是企业展示,Powerpoint软件都具有较好的展示功能,能够形象生动的表达意愿和目的。在PowerPoint2013里面默认的设置是讲图像进行压缩…

微信小程序教程系列之设置标题栏和

微信小程序教程系列之设置标题栏和

标题栏,设置,教程,导航栏,程序,微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window在app.json文件里面,通过window对象里面的属性进行设置示例:app.json:运行:设置导航栏导航栏TabBar如果我们的小程序是一个多 tab 应用(客…

excel中插页码的教程

excel中插页码的教程

教程,页码,电脑软件,excel,  Excel中文档的页码该如何插入呢?接下来是小编为大家带来的excel中插页码的教程,供大家参考。excel中插页码的教程:  插页码步骤1:打开需要添加页码的表格。插页码步骤2:点击菜单栏中的&ldquo;打印预览&rdquo;,弹…

ppt2013如何找回未保存文件

ppt2013如何找回未保存文件

保存文件,方法,电脑软件,  有时候鬼使神差的总是忘记保存文件,或者是删除文件的时候一不小心,就将需要的ppt文件未保存给误删了,那如何修复ppt文件呢?小编就为你提供ppt2013找回未保存删除文件的方法。ppt2013找回未保存文件的方法这里以off…

对于js垃圾回收机制的理解

对于js垃圾回收机制的理解

垃圾回收机制,电脑软件,js,原理找到不再被使用的变量,然后释放其占用的内存,但这个过程不是时时的,因为其开销比较大,所以垃圾回收器会按照固定时间间隔周期性的执行回收方式a.标记清除当变量进入环境时,将这个变量标记为“进入环境”;当变量离…