table td 文字超出显示省略号

最新推荐文章于 2020-06-28 15:27:50 发布

johnsonvily

最新推荐文章于 2020-06-28 15:27:50 发布

阅读量1.6w

点赞数 1

分类专栏： Html 文章标签： table class xhtml border html

本文链接：https://blog.csdn.net/johnsonvily/article/details/6629749

版权

Html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.tb{width:800px;font-size:12px;background:#6887D9}
.tb thead th{height:25px;background:#217AC4;color:white}
.tb tbody td{height:22px;background:white;padding-left:3px;}
.autocut {
	width:200px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	-icab-text-overflow: ellipsis;
	-khtml-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
}

</style>
</head>
<body>
 <table class="tb" border="0" cellpadding="1" cellspacing="1">
	<thead>
		<tr>
			<th>Column1</th>
			<th>Column2</th>
			<th>Column3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Column1</td>
			<td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
			<td>Column3</td>
		</tr>
		<tr>
			<td>Column1</td>
			<td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
			<td>Column3</td>
		</tr>
		<tr>
			<td>Column1</td>
			<td width="200px;"><div class="autocut">放松的方式方法对所发生的放松的方式的方式</div></td>
			<td>Column3</td>
		</tr>
	</tbody>
  </table>
</body>
</html>

johnsonvily

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
table td 文字超出显示省略号

.tb{width:800px;font-size:12px;background:#6887D9}.tb thead th{height:25px;background:#217AC4;color:white}.tb tbody td{height:22px;backgro
复制链接

扫一扫