做项目时，产品提的需求，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. Oracle Enterprise Linux 64-bit 下Oracle11g的监听配置修改及测试步骤

    测试环境:Oracle Enterprise Linux 64-bit (5.8版本) + Oracle 11g 64位 相关说明: Oracle11g64位软件的安装位置为/u01/app/orac ...

  2. 使用go reflect实现一套简易的rpc框架

    go jsonrpc 在实际项目中,我们经常会碰到服务之间交互的情况,如何方便的与远端服务进行交互,就是一个需要我们考虑的问题. 通常,我们可以采用restful的编程方式,各个服务提供相应的web接 ...

  3. （六十三）自定义TabBar和TabBarButtonItem

    自定义TabBar 先自定义一个UITabBarController,为了方便跳转与设定属性,借助系统的TabBarController的功能,但是要移除内部的控件然后自己添加一个View和多个按钮. ...

  4. Xp输入法不见了

    早上打开电脑忽然发现以前的输入法(包括搜狗,智能ABC输入法)都不见了,光剩下微软拼音,而且添加输入法的按键是灰色的,不能使用 解决的办法: 打开记事本,输入以下内容:    ___________ ...

  5. java缓存系统

    第一版 package cache; import java.util.HashMap; import java.util.Map; public class Cache1 { private Map ...

  6. React Native ios开发第一课

    前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用.如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看 ...

  7. ffdshow 源代码分析 6： 对解码器的dll的封装（libavcodec）

    ===================================================== ffdshow源代码分析系列文章列表: ffdshow 源代码分析 1: 整体结构 ffds ...

  8. WINCE的批处理

    WINCE上没有提供象window一样的bat文件,如果需要类似功能可以借助第三方程序MortScript MortScript是一个运行于WINCE上的免费脚本解释程序,脚本文件为.mscr或.mo ...

  9. Android高级控件（三）—— 使用Google ZXing实现二维码的扫描和生成相关功能体系

    Android高级控件(三)-- 使用Google ZXing实现二维码的扫描和生成相关功能体系 摘要 现在的二维码可谓是烂大街了,到处都是二维码,什么都是二维码,扫一扫似乎已经流行到习以为常了,今天 ...

  10. 色彩转换——RGB & HSI

    RGB to HSI I=(R+G+B)/3; S=1-3*min(R,G,B)/(R+G+B); H = cos^(-1)((0.5*((R-G)+(R-B))) / ((R-G)^2 + (R-B ...