表格Table寬度設置無效
連接: 菜鳥在線HTML/CSS/JS在線工具.能夠用這個工具在線作一下試驗，下面的代碼都是在這頁面實現的web
第1回合
<table>標籤中沒有加
style="table-layout:fixed;"列的寬度根據每行中最寬的決定
<table border="1px" cellspacing="0" width="300px">
<tr>
<td width="10%">1</td>
<td width="30%">1</td>
<td width="60%">1</td>
</tr>
<tr>
<td width="25%">2</td>
<td width="25%">2</td>
<td width="50%">2</td>
</tr>
</table>
第2回合
加了
style="table-layout:fixed;"列寬根據第一行的列寬決定
可是第二行的寬就沒辦法定義了svg
<table border="1px" cellspacing="0" width="300px" style="table-layout:fixed;">
<tr>
<td width="10%">1</td>
<td width="30%">1</td>
<td width="60%">1</td>
</tr>
<tr>
<td width="25%">2</td>
<td width="25%">2</td>
<td width="50%">2</td>
</tr>
</table>
第3回合 (關鍵回合)
經過合併單元格的形式來得到本身想要的佈局
切記：第一行的合併單元格總數必定要等於下面每行的單元單元格總數，作到每一行的單元格總數都是同樣的，多少無所謂同樣就行，可是，合併單元格太少作不出這種相互錯位的效果工具
<table border="1px" cellspacing="0" width="300px" style="table-layout:fixed;">
<tr>
<td width="10%" colspan = "2">1</td>
<td width="30%" colspan = "6">1</td>
<td width="60%" colspan = "12">1</td>
</tr>
<tr>
<td width="25%" colspan = "5">2</td>
<td width="25%" colspan = "5">2</td>
<td width="50%" colspan = "10">2</td>
</tr>
</table>
第4回合
去掉
style="table-layout:fixed;"第一行第二列比上圖要窄一點,多是由於用了百分比的緣由
<table border="1px" cellspacing="0" width="300px">
<tr>
<td width="10%" colspan = "2">1</td>
<td width="30%" colspan = "6">1</td>
<td width="60%" colspan = "12">1</td>
</tr>
<tr>
<td width="25%" colspan = "5">2</td>
<td width="25%" colspan = "5">2</td>
<td width="50%" colspan = "10">2</td>
</tr>
</table>
第5回合
第一行的寬換成固定值，第二行不變，表格發生了變化
<table border="1px" cellspacing="0" width="300px" >
<tr>
<td width="30px" colspan = "2">1</td>
<td width="90px" colspan = "6">1</td>
<td width="180px" colspan = "12">1</td>
</tr>
<tr>
<td width="25%" colspan = "5">2</td>
<td width="25%" colspan = "5">2</td>
<td width="50%" colspan = "10">2</td>
</tr>
</table>
第6回合
加上
style="table-layout:fixed;"變回原來的指望佈局
<table border="1px" cellspacing="0" width="300px" style="table-layout:fixed;">
<tr>
<td width="30px" colspan = "2">1</td>
<td width="90px" colspan = "6">1</td>
<td width="180px" colspan = "12">1</td>
</tr>
<tr>
<td width="25%" colspan = "5">2</td>
<td width="25%" colspan = "5">2</td>
<td width="50%" colspan = "10">2</td>
</tr>
</table>
第7回合
所有換成固定值，去掉
style="table-layout:fixed;"佈局又變回討厭的樣子
<table border="1px" cellspacing="0" width="300px">
<tr>
<td width="30px" colspan = "2">1</td>
<td width="90px" colspan = "6">1</td>
<td width="180px" colspan = "12">1</td>
</tr>
<tr>
<td width="75px" colspan = "5">2</td>
<td width="75px" colspan = "5">2</td>
<td width="150px" colspan = "10">2</td>
</tr>
</table>
第8回合
加上
style="table-layout:fixed;"，又變成咱們喜歡的樣子了
<table border="1px" cellspacing="0" width="300px" style="table-layout:fixed;">
<tr>
<td width="30px" colspan = "2">1</td>
<td width="90px" colspan = "6">1</td>
<td width="180px" colspan = "12">1</td>
</tr>
<tr>
<td width="75px" colspan = "5">2</td>
<td width="75px" colspan = "5">2</td>
<td width="150px" colspan = "10">2</td>
</tr>
</table>