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