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

  • 相关阅读:
    字符、字符串和文本处理
    接口
    泛型
    事件
    Expression表达式树 案例
    栈帧
    属性
    方法
    常量和字段
    Dynamic
  • 原文地址:https://www.cnblogs.com/dxt510/p/11310463.html
Copyright © 2011-2022 走看看