table表格自适应代码写法

第一步：html中的table代码

<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>

第二步：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;}

效果图见下：