做项目时，产品提的需求，table表格里面，每一列限制文字超出宽度后显示省略号，等点击td时，文字显示完整，今天整理了一下代码，积累一下
备注：1、邮箱和网址，在td里面不会自动换行，需要增加word-wrap:break-word此属性
2、默认table会超出整个显示屏窗口有滚动条，需要增加table-layout:fixed此属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
html{font-size: 1rem;font-family: Microsoft YaHei, SimHei, Arial, Helvetica, sans-serif;}
table{border-left:1px solid #ccc;text-align:center;border-collapse:collapse;width: 100%;border-top: 2px solid #00A9C2;}
td,th{border:1px solid #ccc;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left;padding: 0.3vw 0.3vw;text-align: center;}
tr{height: auto;}
.tr_detail{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
th{font-weight:600;font-size:1rem;}
.email_url{word-wrap:break-word;}
</style>
</head>
<body>
<table style="table-layout:fixed"><!--table-layout:fixed 如果不设置该属性，table会超出当前窗口，显示滚动条-->
<tr>
<th style="width: 14%;">企业名称</th>
<th style="width: 7%;">主营业务</th>
<th style="width: 6%;">联系人</th>
<th style="width: 10%;">联系人手机号码</th>
<th style="width: 10%;">企业邮箱</th>
<th style="width: 8%;">企业电话</th>
<th style="width: 6%;">企业传真</th>
<th style="width: 11%;">通讯地址</th>
<th style="width: 6%;">公司性质</th>
<th style="width: 9%;">企业官网</th>
<th style="width: 6%;">操作</th>
</tr>
<tr class="tr_show">
<td>北京昌佳泵业有限公司北京昌佳泵业有限公司</td>
<td>收集收集地方换个间段</td>
<td>李先生</td>
<td>15788889999</td>
<!--邮箱和网址需要加email_url类名，否则不会自动折行-->
<td class="email_url">marketing@chinabidders.com</td>
<td>400-6858-688</td>
<td>400-6858-688</td>
<td>北京市海淀区华澳中心东侧5楼</td>
<td>外贸</td>
<td class="email_url">https://www.chinabidders.com/</td>
<td><a class="look_button detail_popup" href="#2">查看</a></td>
</tr>
</table>
</body>
</html>
<!--点击tr显示详情-->
<script>
(function(){
$($(".tr_show").find("td")).addClass("tr_detail");
})();
$(".tr_show").click(function(){
$($(this).find("td")).toggleClass("tr_detail");
});
</script>