table表格过长数据隐藏，鼠标停留显示全部

1.css代码，放在<style>标签里

table {table-layout: fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}table td {position: relative;/*width: 80px;*/height: 20px;text-align: center;font-weight: normal;width: 100%;word-break: keep-all; /* 不换行 */white-space: nowrap; /* 不换行 */overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/}table td:hover {overflow: visible;/* 显示 */white-space: normal;/* 允许文字自动换行 */word-wrap: break-word;/* 文字自动换行 */}

2.效果图

第一条为鼠标悬停的时显示的数据，第二、三条为隐藏时的样式。

3.注意事项：

这里需要注意的一点table td:hover，如果不进行文字自动换行的设置，文字会默认在同一行进行显示

table td:hover{overflow: visible;/* 显示 */
}

效果如下：

table表格过长数据隐藏，鼠标停留显示全部相关推荐

wps姓名隐藏为星号_wps表格把重要数字隐藏用星号显示的方法步骤
wps表格把重要数字隐藏用星号显示的方法步骤使用函数功能可以将wps表格中的数字用星号来显示.这里使用了CONCATENATE函数的不同用法来达到隐藏数字的目的.CONCATENATE函数的功能是将 ...
echarts-坐标轴名称过长省略，鼠标移入显示全部
坐标轴名称过长省略,鼠标移入显示全部一.效果图二.解决思路三.代码一.效果图二.解决思路创建一个div用于展示全称,鼠标悬浮坐标轴之上该div显示,反之隐藏第一步:为了让坐标轴响应和触发 ...
echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...
Vue：element-ui中表格过长内容隐藏显示
一.el-table表格在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表 ...
echart移上去显示内容_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...
LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认 ...
Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据 <el-table max-he ...
小程序table 表格+小程序table 表格太长显示不全，实现滚动效果
<view style="margin:15px"><van-row><van-col span="20"><van- ...
react + ant design 实现动态合并Table表格（相同数据合并为一条）
一.首先来看看需求,主要就是一个表格的合并这里是官方文档给出的关于合并的方法表头只支持列合并,使用 column 里的 colSpan 进行设置. 表格支持行/列合并,使用 render 里的单元 ...

table表格过长数据隐藏，鼠标停留显示全部

table表格过长数据隐藏，鼠标停留显示全部相关推荐

最新文章

热门文章