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>  
  • 相关阅读:
    数学趣题——汉诺塔
    数学趣题——选美比赛
    数学趣题——计算组合数
    (结构型模式)Proxy——代理模式
    SHELL脚本的基础知识2——使用结构化命令
    数学趣题——寻找假币
    Cocoa使用自定义对话框的方法
    回调函数
    ObjectiveC 内存管理(转)
    mac 密码输入框控制——只能输入数字和字母,禁止特殊字符的输入
  • 原文地址:https://www.cnblogs.com/zhangs1986/p/8124912.html
Copyright © 2011-2022 走看看