做项目时，产品提的需求，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>

td默认文字超出后显示..，点击tr时td文字显示完整的更多相关文章

  1. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  2. 赋予option元素点击事件后，点击select时却触发了option事件。如何解决？

    将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name=&q ...

  3. td 中设置超出宽度显示省略号失效

    td测试内容超出显示省略号时,结果没有显示省略号,而是一直往后显示,且超出了td大小,强行挤大了table. 原因是因为td默认不换行. 解决方法: 1.强制td换行. IE加上word-break: ...

  4. table中tr或者td的点击事件

    直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...

  5. 文字超出DIV后,隐藏文字并显示...

    <html> <head> <style type="text/css"> #cs{width:100px;height:50px;line-h ...

  6. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  7. 用户界面样式（cursor，resize，vertical-align，outline，文字超出显示省略号）

    1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添 ...

  8. 点击input时,里面默认字体消失显示

    点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...

  9. css-文本超出后显示省略号

    1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...

随机推荐

  1. Linux之解决你的网络问题

    在网络方面,Linux系统通常可以正常的工作,但是偶尔也会出现让人心烦一些的问题,下面就是一些网络问题的常用的解决方案. 如果你的网络接口看起来已经启动和运行,但是不能访问因特网,这时你就可以试试pi ...

  2. Dynamics crm2013 IFD部署后启用多组织

    对CRM的多组织都不会陌生,在常规模式下新建组织后更改下url后面的组织名称即可访问新的组织了,而在部署IFD后就需要注意两点:1.域名的DNS解析:2.relying patry trust的更新 ...

  3. GDAL库中WFS服务中含有中文不能获取数据的问题

    GDAL库中目前提供了对WFS服务发布的数据进行获取,目前发现对于中文的服务名称或者图层名为中文,GDAL不能正确识别.通过调试发现,其原因有下面两点: 1.输入的URL路径没有使用UTF8编码而从网 ...

  4. Java进阶(二十四)Java List集合add与set方法原理简介

    Java List集合add与set方法原理简介 add方法 add方法用于向集合列表中添加对象. 语法1 用于在列表的尾部插入指定元素.如果List集合对象由于调用add方法而发生更改,则返回 tr ...

  5. MinerStoreThread.java 存储线程

    MinerStoreThread.java 存储线程 package com.iteye.injavawetrust.miner; import java.util.HashMap; import j ...

  6. java程序的加载过程

    昨天笔试阿里有个求java程序加载过程的题目很是复杂,回来研究了好久才有点明白,整理一下.原题代码如下,判断输出: public class StaticTest { public static in ...

  7. APP-FND-00676: 弹性域例程 FDFGDC 无法读取为此说明性弹性域指定的默认引用字段

    路径: AR: 设置- 财务系统 - 弹性域- 说明性 -注册 手工增加: RECEIPT_METHOD_ID 路径: AR: 设置- 财务系统 - 弹性域- 说明性 -段 路径:收款 - 收款 点  ...

  8. Django应用部署 - 上线指南

    http://blog.csdn.net/pipisorry/article/details/46957613 python manage.py runserver已经很接近于服务器的形式,但是并不能 ...

  9. React Native开发必备的10个插件包

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  10. 【60】Spring总结之基础架构（1）

    为什么用Spring? Spring一直贯彻并遵守"好的设计优于具体实现,代码应易于测试",这一理念,并最终带给我们一个易于开发.便于测试而又功能齐全的开发框架.概括起来Sprin ...