table设置超出部分隐藏,鼠标移上去显示全部内容的方法


Posted in HTML / CSS onDecember 24, 2022

 table内容超出宽度时隐藏并显示省略标记

HTML中,一个表格,要达到二个条件:

1、内容多了不自动换行;

2、固定单元格宽度。如果内容超出,则隐藏;

如 果在IE下,只是写成<table style="table-layout:fixed; overflow:hidden;"><tr><td nowrap>则可,而在FF下则不行。兼容IE和FF的写法,应该为:<table style="table-layout:fixed;"><tr>td style="overflow:hidden;" nowrap>

3、显示省略标记,只支持IE:

text-overflow:ellipsis;

测试代码:

<style>.tbl {table-layout:fixed}.td {overflow:hidden;text-overflow:ellipsis}</style>

<table class="tbl" border=1 width=80>

<tr>

    <td width=25% class="td" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>

    <td class="td" nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>

</tr>

</table>

table设置超出部分隐藏,鼠标移上去显示全部内容

核心代码

table {
    border-collapse: collapse;
    width:55em;
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
.thead th{
    width: 63px;
    height: 25px;
    text-align: center;
}
 
table td{
    position: relative;
    /*width: 80px;*/
    height: 25px;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
 
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
table td:hover {
    overflow: visible;  /* 鼠标放上去显示全部文字 */
}

比较适合单独的页面,去过是全站模板就不能这么用了

table表格溢出隐藏

CSS部分:

table{
    table-layout:fixed;
    width:100%;
    height:100%;
    border-collapse:collapse;
}
table td{
    border:1px solid #5a5858;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.box{
    width:400px;
    height:200px;
}

HTML部分:

<div class="box">
    <table>
        <tr>
            <td>1111</td>
            <td>5555555555555555555456464645646464646</td>
        </tr>
    </table>
</div>

到此这篇关于table设置超出部分隐藏,鼠标移上去显示全部内容的方法的文章就介绍到这了,更多相关table超出隐藏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 #HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
You might like
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP 文件类型判断代码
2009/03/13 PHP
PHP学习笔记之二
2011/01/17 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
Yii分页用法实例详解
2014/12/04 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python中的With语句的使用及原理
2020/07/29 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
幼儿园新学期寄语
2014/01/18 职场文书
应届毕业生求职信
2014/05/26 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Django rest framework如何自定义用户表
2021/06/09 Python