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