简单描述: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中的内容过长,显示为固定长度,多余部分用省略号显示的更多相关文章

  1. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  2. Table里td中的文本过长,设置不换行,随内容同行显示(转载)

    当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap   就可以解决排版问题啦 <td style="white ...

  3. Android中TextView内容过长加省略号

          textview中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中 Android:ellipsize = "end"   省略号在结尾 and ...

  4. table中的td内容过长显示为固定长度,多余部分用省略号代替

    如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...

  5. html 让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?

    <th class="wrap">商品名</th> .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap ...

  6. ie6 表格td中无内容时不显示边框的解决办法

    1.在单元格中加入一个空格.这样: <td> </td> 2.直接在table里这样写:<table border="0" cellspacing=& ...

  7. CSS实现table td中文字的省略与显示

    所谓省略就是把多余的字以“...”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来.对于一个table,兼容IE与FF.Chrome的省略方式CSS写法: table{ width:2 ...

  8. 如何设置td中溢出内容的隐藏显示

    <style type="text/css"> table { table-layout:fixed; } td { overflow:hidden; word-bre ...

  9. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

随机推荐

  1. ubuntu16.04 caffe 安装

    所需环境 opencv3.x + cuda9.0 安装 caffe首先在你要安装的路径下 clone : git clone https://github.com/BVLC/caffe.git 进入 ...

  2. 前端js日期时间格式转换

    前端前后端接口处理时经常会遇到需要转换不同时间格式的情况,比如时间戳格式转换成正常日期显示来进行前端展示. 下面是分享一些不同格式的日期转换函数方法. /** * 时间戳转时间 * @param {S ...

  3. [oracle]查询一个表中数据的插入时间

    select to_char(scn_to_timestamp(ORA_ROWSCN),'yyyy-mm-dd hh24:mi:ss') insert_time from tablename;

  4. linux服务器上,yum、rpm、源码编译安装及卸载

    源码的编译安装及卸载 源码安装三部曲 1.生成makefile编译文件./configure 一般安装包下面都有一个configure文件,用来生成makefile编译文件常用的参数: --prefi ...

  5. django restframework Serializer field

    SerializerMethodField 这是一个只读字段.它通过调用它所连接的序列化类的方法来获得它的值.它可用于将任何类型的数据添加到对象的序列化表示中. 签名: SerializerMetho ...

  6. 贝叶斯A/B测试 - 一种计算两种概率分布差异性的方法过程

    1. 控制变量 0x1:控制变量主要思想 科学中对于多因素(多变量)的问题,常常采用控制因素(变量)的方法,吧多因素的问题变成多个单因素的问题.每一次只改变其中的某一个因素,而控制其余几个因素不变,从 ...

  7. expdp/impdp使用

    Oracle11G数据泵expdp/impdp使用并行与压缩技术备份与恢复 环境准备创建directory对象create or replace directory expdp_dir as '/ex ...

  8. localhost 将您重定向的次数过多

    localhost 将您重定向的次数过多 问题描述:在项目中,出现 localhost 将您重定向的次数过多 ,有可能是因为设置重定向的时候,自己重定向到自己,或者重定向成环,导致无限的重定向.检查重 ...

  9. JGUI源码:prefixfree 这个库有时候会引起网页一直加载中(10)

    如题,大部分情况下正常,但是chrome频繁刷新时,会出现这个问题,控制台没有异常信息.最终放弃使用引用第三方库prefixfree.min.js

  10. VMware 安装虚拟机系统

    Ø  简介 本文主要介绍使用 VMware 安装虚拟机系统. 1.   创建虚拟机 1)   打开VMware,创建新虚拟机 2)   选择需要安装系统的iso镜像文件 3)   选择需要安装的Win ...