css中,table有一個屬性,table-layout。它的默認值為auto,即自動根據內容調整表格大小。
但是實際應用中,經常發現有些格子中的內容因為換行而不夠美觀,這時我們還是要手動調整寬度。
則將table-layout設為fixed,之後寫定它的總寬及第一個tr中每一項的寬度,即可實現手動調整table寬度。
這裏還有一個小細節,當你把表格定寬之後,如果它的寬度超出了當前頁面的寬度,有可能造成右邊留白。這時需要外部加一個可滑動的div。
示例:
<div style="overflow: auto;">
<table style="table-layout: fixed; border-collapse: collapse; width: 360px; text-align: center;">
<tbody>
<tr>
<th style="width: 100px;">標題一</th>
<th style="width: 200px;">標題二</th>
<th style="width: 60px;">標題三</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
參考: