td默认文字超出后显示..，点击tr时td文字显示完整
做项目时，产品提的需求，table表格里面，每一列限制文字超出宽度后显示省略号，等点击td时，文字显示完整，今天整理了一下代码，积累一下
备注：1、邮箱和网址，在td里面不会自动换行，需要增加word-wrap:break-word此属性
2、默认table会超出整个显示屏窗口有滚动条，需要增加table-layout:fixed此属性
1 <table style="table-layout:fixed"><!--table-layout:fixed 如果不设置该属性，table会超出当前窗口，显示滚动条--> 2 <tr> 3 <th style="width: 14%;">企业名称</th> 4 <th style="width: 7%;">主营业务</th> 5 <th style="width: 6%;">联系人</th> 6 <th style="width: 10%;">联系人手机号码</th> 7 <th style="width: 10%;">企业邮箱</th> 8 <th style="width: 8%;">企业电话</th> 9 <th style="width: 6%;">企业传真</th> 10 <th style="width: 11%;">通讯地址</th> 11 <th style="width: 6%;">公司性质</th> 12 <th style="width: 9%;">企业官网</th> 13 <th style="width: 6%;">操作</th> 14 </tr> 15 <tr class="tr_show"> 16 <td>北京昌佳泵业有限公司北京昌佳泵业有限公司</td> 17 <td>收集收集地方换个间段</td> 18 <td>李先生</td> 19 <td>15788889999</td> 20 <!--邮箱和网址需要加email_url类名，否则不会自动折行--> 21 <td class="email_url">marketing@chinabidders.com</td> 22 <td>400-6858-688</td> 23 <td>400-6858-688</td> 24 <td>北京市海淀区华澳中心东侧5楼</td> 25 <td>外贸</td> 26 <td class="email_url">https://www.chinabidders.com/</td> 27 <td><a class="look_button detail_popup" href="#2">查看</a></td> 28 </tr> 29 </table>
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;}
<script> (function(){ $($(".tr_show").find("td")).addClass("tr_detail"); })(); $(".tr_show").click(function(){ $($(this).find("td")).toggleClass("tr_detail"); }); </script>
