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

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

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 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

Web前端知识体系精简——CSS 篇

css是用来对html进行修饰的一门语言。 1、选择器 css的选择器有很多种,常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(b...

1958
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:在手机应用开发中如何实现跳转地图

622
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现按钮组功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

774
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

38910
来自专栏微信小程序开发

CSS常用实例,web前端开发者不知道这些就太low了

CSS常用实例 web前端开发中,会用到css实现各种网页布局,以下是我列出的几种常见实例,如果本文有错误的地方,也请指正。 PDF格式: http://dem...

38512
来自专栏ytkah

marquee一行代码实现滚动跑马灯效果无需js

  最近ytkah决定拓展一下业务,贴补一些家用,~(@^_^@)~,将以前做的网站建设案例展现出来,有这方面需求的朋友可以扫一下二维码加我哈,或者推荐朋友给我...

3765
来自专栏企鹅号快讯

漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

2066
来自专栏小白安全

给网站顶部添加一个彩色横条

效果图片 开始  首先,我们需要图片,直接贴出来吧,需要的请直接右键另存为。 GIF滚动优化版   接着,在网站顶部适当位置添加一个Div,自...

2675
来自专栏smy

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 =========================================...

3396
来自专栏yang0range

CSS的选择器

922

扫码关注云+社区