zoukankan      html  css  js  c++  java
  • table 表格自适应

    1、html

    <table>
          <thead><tr><th>项目名称</th><th>出访国家(地区)</th><th>出访时间</th></tr></thead>
          <tbody class="applytable">
                <tr>
              <
    td><div>美国金融硕士联合培养项目</div></td>
              <
    td><div>美国</div></td>
              <
    td><div>2019年6月01日</div></td>
            </tr> </tbody> </table>

    2、css

    (1)使table表格自适应 不出现滚动条    需要给table 加 table-layout: fixed; 样式   ;

    (2)单独设置某列单元格的宽度  给 thead下的 th 设置;

    (3)需要给 tbody中的 td 添加 <div></div>  标签 ;

    (4)要使table表格的td溢出后显示...     分别 给th 和 td 添加    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;  样式 ;

    (5)不用给每个th都设置宽度,只需给需要的设置即可;

    table{font-size: 14px;color: #5a5a5a; width: 100%;table-layout: fixed;}
    table thead tr th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    table thead tr th:first-child{width:10%;}
    table tbody tr td>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

    3、效果

  • 相关阅读:
    如何重写Java中的equals方法
    如何阅读论文
    新的开始
    react父组件调用子组件方法
    关于 webpack 的研究
    浅析HTTP代理原理
    Maven POM详解
    项目实战
    项目实战-Gulp使用
    AngularJS 项目开发实战
  • 原文地址:https://www.cnblogs.com/dxt510/p/11310463.html
Copyright © 2011-2022 走看看