zoukankan      html  css  js  c++  java
  • CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示

    转载

    首先需要在table中设置table-layout:fixed;

    <table style="table-layout:fixed"></table>

    然后在表头th中设置每列的宽度

    <table style="table-layout:fixed">
    <th width="10%">Title01</th>
    <th width="20%">Title02</th>
    <!--  其他th -->
    </table>

    然后在需要当长度大于一定数值时用省略号表示的td上面添加样式

    <table style="table-layout:fixed">
    <th width="10%">Title01</th>
    <th width="20%">Title02</th>
    <!--  其他th -->
    <c:foreach items = ""  var ="" varStatus = "">
    <td><title01</td>
    <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><title02</td>
    <!--  other td   -->
    </c:foreach>
    </table>

    bootstrap在设置表格大小时需要设置到th中,否则可能不会生效,以上在bootstrap中可用

     当不使用bootstrap的时候可以使用如下样式,网上搜索到的,比较好用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
    <html>   
    <head>   
       <style type="text/css">   
    .mytable {   
       table-layout: fixed;   
        98% border:0px;   
       margin: 0px;   
    }   
      
    .mytable tr td {   
        text-overflow: ellipsis; /* for IE */  
        -moz-text-overflow: ellipsis; /* for Firefox,mozilla */  
        overflow: hidden;   
        white-space: nowrap;   
        border: 1px solid;   
        text-align: left   
    }   
    </style>   
    </head>   
    <body>   
        <table width="500px" class="mytable">   
            <tr>   
                <td width="20%">再别康桥</td>   
                <td width="80%">
                    轻轻我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩
                </td>  
                 
            </tr>   
        </table>   
    </body>   
    </html>  
  • 相关阅读:
    安装centos虚拟机
    关于区别广播域与冲突域
    网络七层架构
    怎么有效避免黑客使用跳板软件进行攻击窃取信息数据
    C语言猜数字游戏
    页置换算法FIFO、LRU、OPT
    Samza的ApplicationMaster
    Samza文档翻译 : Comparison Introduction
    Samza文档翻译 : Architecture
    Samza文档翻译 : Concepts
  • 原文地址:https://www.cnblogs.com/zhangs1986/p/8124912.html
Copyright © 2011-2022 走看看