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的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JS打印组合功能
2016/08/04 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
成人教育自我鉴定
2013/11/01 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
银行优秀员工事迹
2014/02/06 职场文书
小学安全汇报材料
2014/08/14 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
工程技术员岗位职责
2015/04/11 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python