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实现圆角,阴影,透明
Dec 23 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 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
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
Express之托管静态文件的方法
2018/06/01 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python实现CET查分的方法
2015/03/10 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
strstr()的简单实现
2013/09/26 面试题
业务主管岗位职责
2013/11/20 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
开学典礼致辞
2015/07/29 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
Redis 常见使用场景
2021/08/30 Redis
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang