表格展示+多余数据省略+鼠标悬浮显示

本人非专业前端,写的不好还望多多指教

1.首先需要将需要这样处理的td,th设置一下样式

    text-align: center; /*设置水平居中*/

    vertical-align: middle; /*设置垂直居中*/

    white-space: nowrap; /*文本不会换行,在同一行显示*/

    overflow: hidden; /*超出隐藏*/

    text-overflow: ellipsis; /*省略号显示*/ 

2.但是设置的百分比td还是会被撑开,设置一下table的样式

table-layout: fixed;/*列宽由表格宽度和列宽度设定。*/  

3.最后给省略的td加上title就可以了,title的内容一般是从数据库获取到的最原始的数据。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端

自己实现PC端jQuery版轮播图

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了...

4649
来自专栏木子昭的博客

<布局>子级相对级居中对齐的几种方式

? 一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50...

2634
来自专栏web开发

自实现PC端jQuery版轮播图

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了...

1522
来自专栏前端知识分享

第123天:移动web开发中的常见问题

准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶...

592
来自专栏前端侠2.0

draggable 属性 原

昨天是在document上绑定mousedown ,mousemove ,mouseup事件,来实时计算,并设置相应元素的宽度,这是最直接想到的办法,就不再多说...

491
来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

1935
来自专栏达摩兵的技术空间

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。

484
来自专栏ShaoYL

iOS---iPad开发及iPad特有的特技

3337
来自专栏Spring相关

弹幕和回到顶部前端web

583
来自专栏无原型不设计

Mockplus原型交互跟我做之3 - 认识“链接点”

上两次,我们已经快速地做了一个可以实用的交互(自动消失的消息框),还做了一个花哨但没用的东西,旋转的风车。 暂时缓缓往下走,我们先来了解点“基本知识”,Mo...

2657

扫码关注云+社区