Html中的table元素中,colspan 属性规定单元格可横跨的列数即跨列,rowspan 属性规定单元格可横跨的行数跨行。
两个属性的代码实例如下:
1、表格单元横跨两列的表格:
<table border="1"><tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td><!--设置横跨两列-->
</tr>
<tr>
<td colspan="2">February</td><!--设置横跨两列-->
</tr>
</table>
结果:
2、表格单元横跨两行的表格:
<table border="1"><tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td><!--设置横跨两行-->
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
表格单元横跨两列的表格:<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
表格单元横跨两行的表格:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
不设定格子的宽和高会是什么样的?Chome 上的效果观察出来你不觉得 1 和 5 的宽度超过了 2 的 2 倍么?IE11 上看到的宽度反而是正常的,只是 IE 11 的高度不正常。你尝试一下把浏览器的窗口放大点看尺寸是否会自动调节。
因此这看上去是总尺寸被自动调节了的效果,需要明确的设定 table 的尺寸,或者先不设定任何尺寸看浏览器怎么自动调节,找到规律后再来设置。