链接: 菜鸟在线HTML/CSS/JS在线工具.可以用这个工具在线做一下试验,下面的代码都是在这页面实现的
第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;"
列宽根据第一行的列宽决定
但是第二行的宽就没办法定义了
<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>