简单描述: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. vs code 的便捷使用

    鼠标滚动 改变字体大小 打开编辑器设置,搜索 editor.mouseWheelZoom  或者文本设置 自动保存 打开设置 搜索  autosave

  2. kubernetes 1.14安装部署dashboard

    简单介绍: Dashboard是一个基于web的Kubernetes用户界面.您可以使用Dashboard将容器化应用程序部署到Kubernetes集群,对容器化应用程序进行故障诊断,并管理集群资源. ...

  3. ACM在线模板

    转载自:https://blog.csdn.net/f_zyj/article/details/51594851 Index 分类细则 说起分类准则,我也是很头疼,毕竟对于很多算法,他并不是单调的,而 ...

  4. MySQL 主从复制实战解析

    前言:前面几篇文章讲解了在应用层读写分离的配置和使用,这篇文章将来个主从复制的实战解析. 说明:主从复制,读写分离结构图 原理图 主库生成一个线程: Binlog Dump线程 1.此线程运行在主库, ...

  5. 史上最全PMP备考考点全攻略(上篇-五大过程组,附赠资料)

    一.这可能是一篇史上最全的PMP备考考点全梳理文章 写在前面,这可能是史上最全的PMBOK考点全书考点梳理,由PMP备考自律营呕心沥血整理,内容较长,分为上下篇,绝对值得所有正在备考PMP的学员收藏! ...

  6. SpringBoot实现优雅的关机

    最近在公司使用了 Springboot 项目, 发现在   linux  上 通过 java -jar 命令可以十分安全的运行, 但是 当我们需要关闭它的时候呢? 难道  登陆服务器 kill 线程? ...

  7. (模拟) codeVs1083 && 洛谷P1014 Cantor表

    题目描述 Description 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/ ...

  8. 分类器的评价指标-ROC&AUC

    ROC 曲线:接收者操作特征曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,roc 曲线上每个点反映着对同一信号刺激的感 ...

  9. pt-show-grants的用法

    pt-show-grants的用法 1.先查找所有用户和Host 2.然后逐个执行show grants pt-show-grants的功能是格式化打印输出MySQL上的赋权,以便你可以有效地复制.比 ...

  10. python计算素数和

    计算输入两个正整数x,y(x<=y,包括x,y)素数和.函数isPrime用以判断一个数是否素数,primeSum函数返回素数和 以下为源码 def isPrime(n) :    for i ...