做项目时，产品提的需求，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之旅（十五）——多线程的生产者和消费者，停止线程,守护线程,线程的优先级，setPriority设置优先级，yield临时停止

    JAVA之旅(十五)--多线程的生产者和消费者,停止线程,守护线程,线程的优先级,setPriority设置优先级,yield临时停止 我们接着多线程讲 一.生产者和消费者 什么是生产者和消费者?我们 ...

  2. Linux IPC实践(8) --共享内存/内存映射

    概述 共享内存区是最快的IPC形式.一旦这样的内存映射到共享它的进程的地址空间,这些进程间数据传递不再涉及到内核,换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据(如图). 共享内存 VS ...

  3. uploadify在火狐下上传不了的解决方案，java版（Spring+SpringMVC+MyBatis）详细解决方案

     由于技术选型的原因,在一个产品中,我选择了uploadify,选择它的原因是它有完善的技术文档说明(http://www.uploadify.com/documentation/),唯一不足的是 ...

  4. （七）大图展示Demo引出的UIScrollView的使用

    UIScrollView是一个能够滚动的视图控件,可以通过滚动查看所有内容. 用途: 1.一张大图屏幕放不下,可以用各个方向的手势来看大图的各个部分. 2.手机的设置页面有很多的选项,需要上下滚动来查 ...

  5. R--线性回归诊断（二）

    线性回归诊断--R [转载时请注明来源]:http://www.cnblogs.com/runner-ljt/ Ljt   勿忘初心  无畏未来 作为一个初学者,水平有限,欢迎交流指正. R--线性回 ...

  6. 【1】mac下面iTerm配置oh-my-zsh教程

    1.安装iterm 地址如下: http://iterm2.com/ 2.安装oh-my-zsh 打开iterm输入如下命令: sh -c "$(curl -fsSL https://raw ...

  7. android 高斯模糊实现

    高斯模糊 高斯模糊就是将指定像素变换为其与周边像素加权平均后的值,权重就是高斯分布函数计算出来的值. 一种实现 点击打开链接<-这里是一片关于高斯模糊算法的介绍,我们需要首先根据高斯分布函数计算 ...

  8. Media Player Classic - HC 源代码分析 4：核心类 （CMainFrame）（3）

    ===================================================== Media Player Classic - HC 源代码分析系列文章列表: Media P ...

  9. 数据包接收系列 — IP协议处理流程（一）

    本文主要内容:在接收数据包时,IP协议的处理流程. 内核版本:2.6.37 Author:zhangskd @ csdn blog IP报头 IP报头: struct iphdr { #if defi ...

  10. hbase 集群管理脚本

    #!/bin/bash # Show all running Java processes on region servers. Must run on master using HBase owne ...