Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >表格展示+多余数据省略+鼠标悬浮显示

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

作者头像
用户1171305
发布于 2017-12-28 03:58:47
发布于 2017-12-28 03:58:47
2.5K0
举报
文章被收录于专栏:成长道路成长道路

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
CSS进阶内容——布局技巧和细节修饰
我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧
秋落雨微凉
2022/10/25
2K0
CSS进阶内容——布局技巧和细节修饰
越出长度后会自行的截掉多出部分的文字
在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,我们可以通过js的方式来实现,但是感觉太麻烦,使用css我们就可以非常好的实现这个效果,下面请看代码
OECOM
2020/07/02
4380
解决text-overflow: ellipsis;不生效的问题
按照text-overflow: ellipsis;使用规则,在标签样式中添加该属性未生效,例如:
张哥编程
2024/12/19
1520
前端项目知识点总结
前端总结 html 字体图标的引用 添加到项目 项目下载到本地 加font文件夹,将字体文件放进去 将css文件加入到link中 雪碧图 先用一个 span 标签 将span标签display:inline-block 设置图标的background-position 外边距合并的问题 父元素没有边界线, 无法构成盒子模型 此时调子元素的margin值, 父子元素都会改变出错 解决方法: 给父元素加属性 overflow:hidden; 标签 for 属性应当与相关元素的 id 属性相
星辉
2019/01/15
9220
CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)
可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度
Ewall
2018/09/04
8550
CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)
自适应宽度元素单行文本省略用法探究
单行文本省略是现代网页设计中非常常用的技术,几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景,如列表标题、文章摘要等。在响应式开发中,自适应宽度元素单行文本省略容易失效不起作用,对网页开发这造成困扰。因此,本文将要要探究自适应宽度元素单行文本省略用法。现代浏览器都支持单行文本显示生省略号(...)样式,一般情况下,实现单行文本省略只需要给元素添加下面三个CSS样式:
用户6167509
2019/09/04
2.6K0
自适应宽度元素单行文本省略用法探究
小程序开发总结04 - 特殊样式处理
微信小程序中的button组件有特定的css,背景可用background:none;去掉,但边框直接用border:none;无法去除
CS逍遥剑仙
2018/06/23
1.1K0
小程序开发总结04 - 特殊样式处理
49个常用的CSS代码片段,建议整理收藏
text-shadow 为网页字体添加阴影,通过对text-shadow属性设置相关的属性值。
前端达人
2021/07/16
2.2K0
【CSS3】css开篇基础(5)
轻量级:一个图标字体比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器的请求
E绵绵
2024/10/27
1310
【CSS3】css开篇基础(5)
05_CSS进阶技巧
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
张哥编程
2024/12/13
1050
CSS高级技巧讲解
display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要!
用户8670130
2021/08/31
9120
CSS 魔法 | 超强的文本超出提示效果
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 img 一个很微妙但非常 人性化
Sneaker-前端公虾米
2021/06/21
2.1K0
CSS 魔法 | 超强的文本超出提示效果
table文字溢出显示省略号问题
2009 年的《麻省理工科技评论》(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之一。
Daotin
2022/05/09
1.2K0
table文字溢出显示省略号问题
【CSS】947- 十几个 CSS 高级技巧汇总
「列举一下效果」 设置input的placeholder的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式 纯CSS绘制三角形 虚线框绘制技巧 卡券效果制作 隐藏文本的常用两种方法 表格边框合并 「1-1. 设置input 的placeholder的字体样式」 设置input占位符的样式 input::-webkit-input-placeholder { /* Chrome/Opera/Sa
pingan8787
2021/05/14
4520
【CSS】947- 十几个 CSS 高级技巧汇总
第141天:前端开发中浏览器兼容性问题总结(二)
在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:middle,但是文本框的内容不会垂直居中
半指温柔乐
2018/09/11
2K0
div+css如何实现超出两行显示省略号?
div+css如何实现超出两行显示省略号?我们这里可以使用-webkit-私有属性来实现 第一个是单行超出隐藏,第二是超出两行隐藏,工作忙,直接上代码: <!DOCTYPE html> <html>
李维亮
2021/07/09
1.3K0
Day8:html和css
display: none 为 无,隐藏元素 display: block 为 显示元素 转换为块级元素
达达前端
2019/07/03
1.7K0
Day8:html和css
CSS用户界面样式
所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓以及 防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。
星辰_大海
2020/09/30
1.9K0
原生CSS实现单行多余省略和多行多余省略
在日常开发中,经常会遇到一些省略文本的需求,比如“文本在一行显示,超出部分在结尾用省略号显示”、“最多显示三行,超出部分在第三行末尾用省略号显示”。
lonelydawn
2021/10/19
3.4K0
CSS第五天-定位
CSS第五天-定位 静态定位:static 定位的默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来的位置,进行定位 没有脱标,在页面还占有位置 天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度 ---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动条的滚动而滚动 可以
小城故事
2023/02/27
2.8K0
CSS第五天-定位
相关推荐
CSS进阶内容——布局技巧和细节修饰
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档