table中td内容过长，则td省略号展示，鼠标单击展示/隐藏剩余内容

最新推荐文章于 2021-11-22 14:26:41 发布

大Luo

最新推荐文章于 2021-11-22 14:26:41 发布

阅读量1.7k

点赞数

分类专栏： web前端开发文章标签： td内容过长 html内容过长省略号展示

本文链接：https://blog.csdn.net/luokai666/article/details/80351300

版权

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
table .td1-hide{
	list-style:none;
	max-width:100px;
	white-space:nowrap;
	text-overflow:ellipsis; 
	overflow: hidden;
	margin-top:5px; 
}
table .td2-show{
	list-style:none;
	max-width:100px;
	word-break:break-all;
	margin-top:5px;
}
.contain { 
width:900px; 
margin: 15px auto; 
font-family: ‘Microsoft YaHei’; }


table { 
width:100%; 
text-align: center; 
border:1px solid #e3e6e8; 
border-collapse: collapse;
display: table; }
</style>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>  
<body> 
<div class="contain">
 <table>
            <thead>
                <th>电影名称</th>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大Luo

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
table中td内容过长，则td省略号展示，鼠标单击展示/隐藏剩余内容

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;&lt;/title&gt; &lt;style type="text/css&
复制链接

扫一扫