您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
内容摘要: table内容超出宽度时隐藏并显示省略标记HTML中,一个表格,要达到二个条件:1、内容多了不自动换行;2、固定单元格宽度。如果内容超出,则隐藏;如果在IE下,只是写成tablestyle='table-layout:fixed;overflow:hidden;'trtdnowrap则可,而在FF下则不行。兼容IE和FF的写法,应该为:tablestyle=......
table内容超出宽度时隐藏并显示省略标记

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

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

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

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

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

text-overflow:ellipsis;

测试代码:

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

<tableclass="tbl"border=1width=80>

<tr>

<tdwidth=25%class="td"nowrap>abcdefghigklmnopqrstuvwxyz1234567890</td>

<tdclass="td"nowrap><div>abcdefghigklmnopqrstuvwxyz1234567890</div></td>

</tr>

</table>

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

核心代码

table{

border-collapse:collapse;

width:55em;

table-layout:fixed;/*只有定义了表格的布局算法为fixed,下面td的定义才能起作用。*/

}

.theadth{

width:63px;

height:25px;

text-align:center;

}

tabletd{

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;一起使用。*/

}

tabletd:hover{

overflow:visible;/*鼠标放上去显示全部文字*/

}

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

table表格溢出隐藏

CSS部分:

table{

table-layout:fixed;

width:100%;

height:100%;

border-collapse:collapse;

}

tabletd{

border:1pxsolid#5a5858;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.box{

width:400px;

height:200px;

}

HTML部分:

<divclass="box">

<table>

<tr>

<td>1111</td>

<td>5555555555555555555456464645646464646</td>

</tr>

</table>

</div>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:table不让td文字溢出操作方法 下一篇:Javascript模块导入导出详解
发布日期:2022/12/20
手机扫二维码直达本页
发布时间:14:15:03
点  击:18
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023