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

本文介绍了前端实现表格数据省略及鼠标悬浮显示的技巧。通过设置td和th的text-overflow属性为ellipsis实现省略号显示,并使用table-layout: fixed防止单元格被内容撑开。同时,添加title属性在鼠标悬浮时显示完整数据。
摘要由CSDN通过智能技术生成

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

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的内容一般是从数据库获取到的最原始的数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值