做项目时，产品提的需求，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. Java 中Log4j的使用详情

    Log4j 真的很简单,简单到令人发指的地步.不是要记录日志吗?那就给你一个Log ,然后你用Log 来写东西就行了,先来一个完整类示例: package test; import org.apach ...

  2. pig的cogroup详解

    从实例出发 %default file test.txt A = load '$file' as (date, web, name, food); B = load '$file' as (date, ...

  3. 四大组件之ContentProvider小结

    总结提高,与君共勉 1.什么是Content Provider 内容提供器( Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,提供了一套完整的机制,允许一个程序访问另 ...

  4. SwipeListView实现仿ios的侧滑

    github地址:https://github.com/xiangzhihong/SwipeMenuListView 今天介绍一个SwipeMenuListView实现侧滑删除的例子,其实和listv ...

  5. ORA-04091错误原因与解决方法

    最近工作中写了一触发器报错:ORA-04091:table XX  is mutating, trigger/function may not see it. 下面通过官方文档及网友提供资料分析一下错 ...

  6. (NO.00001)iOS游戏SpeedBoy Lite成形记(十八)

    现在需要实现具体的游戏逻辑大致如下: 玩家点击某条赛道选择一个选手,然后会弹出菜单窗口让玩家输入压赌的金额,如果输入的金额值非法,则在GameInterface下部的状态栏中显示提示,要求玩家重新输入 ...

  7. 海量数据挖掘MMDS week1: MapReduce

    http://blog.csdn.net/pipisorry/article/details/48443533 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  8. Unix/Linux中的grep命令（转）

    本文转载自:如何使用Unix/Linux grep命令——磨刀不误砍柴工系列.该博文条理很清晰. grep简介 grep在一个或多个文件中查找与模式字符串(pattern)匹配的行,并将搜索的结果打印 ...

  9. MTK Android software Tools工具的说明

    MTK发布的Android software Tools工具包,里面包含了很多的MTK工具,如下是简要说明及学习文档 MTK Android software Tools工具的说明如下: 工具 说明 ...

  10. akamai：与看视频广告等待相比，用户更不能忍受缓冲等待

    根据akamai的研究,网络视频广告的位置对于完成率的影响最大,间插广告的完成率比前贴片广告要高18.1%,而前贴片广告比后贴片广告的完成率要高14.3%. 网站的重复访客的视频广告观看完成率比一时兴 ...