table td中的内容过长,显示为固定长度,多余部分用省略号显示
简单描述:table数据过长,结果顶到下一格,影响了数据的查看

解决办法: 给table 加上style属性 另外 给td加上style标签修饰
<table class="table table-striped table-bordered table-hover table-checkable order-column" style="table-layout:fixed;" id="table1"> <style>
td {
white-space:nowrap;//规定文本不换行
overflow:hidden;//关闭滚动条
text-overflow: ellipsis;//溢出文字显示为省略号
}
</style>
说明:style="table-layout:fixed;"就是让table的内部布局固定大小,用width属性调节td的长度。
显示的是XXX....并不是全部的内容,这时候,td标签的title 属性就起到关键作用了,td的text同时赋值给title属性,当鼠标放到table格上,就会显示全部的名称了
效果:

原文链接:https://blog.csdn.net/tuntun1120/article/details/72903387 感谢!!!
table td中的内容过长,显示为固定长度,多余部分用省略号显示的更多相关文章
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- Table里td中的文本过长,设置不换行,随内容同行显示(转载)
当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap 就可以解决排版问题啦 <td style="white ...
- Android中TextView内容过长加省略号
textview中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中 Android:ellipsize = "end" 省略号在结尾 and ...
- table中的td内容过长显示为固定长度,多余部分用省略号代替
如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...
- html 让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
<th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...
- ie6 表格td中无内容时不显示边框的解决办法
1.在单元格中加入一个空格.这样: <td> </td> 2.直接在table里这样写:<table border="0" cellspacing=& ...
- CSS实现table td中文字的省略与显示
所谓省略就是把多余的字以“...”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来.对于一个table,兼容IE与FF.Chrome的省略方式CSS写法: table{ width:2 ...
- 如何设置td中溢出内容的隐藏显示
<style type="text/css"> table { table-layout:fixed; } td { overflow:hidden; word-bre ...
- table表格中的内容溢出布局方式
什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...
随机推荐
- table 里输入rules 验证
HTML <el-form ref='from' :model="fromData"> <el-table ref="tableman" bo ...
- Java逆向工程SpringBoot + Mybatis Generator + MySQL
Java逆向工程SpringBoot+ Mybatis Generator + MySQL Meven pop.xml文件添加引用: <dependency> <groupId> ...
- 快速沃尔什变换(FWT)及K进制异或卷积&快速子集变换(FST)讲解
前言: $FWT$是用来处理位运算(异或.与.或)卷积的一种变换.位运算卷积是什么?形如$f[i]=\sum\limits_{j\oplus k==i}^{ }g[j]*h[k]$的卷积形式(其中$\ ...
- 偏差-方差均衡(Bias-Variance Tradeoff)
众所周知,对于线性回归,我们把目标方程式写成:. (其中,f(x)是自变量x和因变量y之间的关系方程式,表示由噪音造成的误差项,这个误差是无法消除的) 对y的估计写成:. 就是对自变量和因变量之间的关 ...
- windows下安装oracle11g测试是否成功与监听器问题和网页控制台登录
测试步骤1:请执行操作系统级的命令:tnsping orcl 测试步骤 2:请执行操作系统级的命令:sqlplus system/password@orcl 安装完oracle后要启动oracle服务 ...
- 一文入门C3
2.CSS3 官方文档:http://www.w3school.com.cn/cssref/index.asp 2.1.CSS基础 基础简单过下,事先说明下:诸如引入.注释.案例就不一一演示了,有个工 ...
- docker容器网络
1.我们在使用docker run创建Docker容器时,可以用--net选项指定容器的网络模式,Docker有以下4种网络模式: · host模式,使用--net=host指定 · containe ...
- Java第五周学习总结
学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 1.接口 (1)使用关键字interface来定义一个接口,接口分为接口声明和接口体,例如 interf ...
- rocketmq 集群环境搭建配置
rocketmq环境搭建配置: 一. 搭建三主集群,环境:centos-64 7.4 + RocketMQ-4.3.2 Master01: 192.168.102.68 Master02: 192 ...
- knockoutjs复杂对象的可观察性
问题 对于一般数据结构: 1. 对于基本类型的数据的变更的可观察性(observable), 可以使用 ko.observable(xxx) 来声明一个 observable对象, 或将其绑定到视图 ...