zoukankan      html  css  js  c++  java
  • table-layout:fixed 应用

    应用场景一:

    当表格中有很长的英文时,如果没有设置table-layout:fixed 或者 word-break:break-all,则单元格显示的宽度不是我们设置的宽度,如下:

    <style>
     
        table{border:2px solid #ccc; 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}
        td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}
     
    </style>
    <table width="400" border="1" id="table1">
       <tr> 
          <td>3</td>
          <td width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
          <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
       </tr>
       <tr>
           <td>3</td>
           <td>4</td>
           <td>5</td>
       </tr>
    </table>

    上面代码中给table元素添加 table-layout: fixed; 或者给td添加 word-break: break-all ,都可以达到表格安装我们设置的宽度显示:

    table{border:2px solid #ccc; 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}
    td,th{height: 30px;border:2px solid #ccc;/*word-break: break-all;*/}
    table{border:2px solid #ccc; 100%;text-align: center;border-collapse:collapse;/*table-layout: fixed;*/}
    td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}

    应用场景二:

    css的省略号的一般写法:

    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

    当你想在table中应用省略号:

    <style>
        *{padding:0;margin:0;font-size: 12px;color: #333}
        li{list-style: none;}
     
        table{border:2px solid #ccc; 100%;text-align: center;border-collapse:collapse;}
        td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}
     
        .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    </style>
     
    <table width="400" border="1" id="table1">
            <tr>
                <td>3</td>
                <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">5</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
    </table>

    结果完全不是我们想要的:

    解决方法:添加 table-layout: fixed;

    <style>
        *{padding:0;margin:0;font-size: 12px;color: #333}
        li{list-style: none;}
     
        table{border:2px solid #ccc; 100%;text-align: center;border-collapse:collapse;table-layout: fixed;}
        td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}
     
        .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    </style>
     
    <table width="400" border="1" id="table1">
            <tr>
                <td>3</td>
                <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">5</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
    </table>

    效果完全是我们想要的:

  • 相关阅读:
    rabbitmq在linux下单节点部署和基本使用
    使用kafka-python客户端进行kafka kerberos认证
    python confluent kafka客户端配置kerberos认证
    linux下rocksdb的编译安装
    linux下gflags的安装
    ASP.NET:/WebResource.axd
    公司-IT-信息安全:江南天安
    信息安全-证书:数字证书
    信息安全-证书-数字证书:SSL证书
    Error-DotNet:无法为目标平台“Microsoft.Data.Tools.Schema.Sql.Sql120DatabaseSechemaProvider”创建扩展管理器
  • 原文地址:https://www.cnblogs.com/pwindy/p/12974144.html
Copyright © 2011-2022 走看看