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、效果

  • 相关阅读:
    2、介绍在TensorFlow当中使用不同的方式创建张量tensor
    1、TensorFlow如何工作?
    1、
    7、Maven插件
    6、Maven仓库
    5、Maven-构建配置文件
    4、maven——构建生命周期
    3、示例(在java中使用JSON)
    2、json教程
    1、json背景
  • 原文地址:https://www.cnblogs.com/dxt510/p/11310463.html
Copyright © 2011-2022 走看看