HTML 中对于固定表格布局且首行合并时单独控制列宽的方案

对于设置了table-layout为fixed的表格，其每一列的宽度都由第一行的单元格的宽度确定，与第二行以后的单元格宽度及内容无关。所以可以大幅度提高表格解析的性能，当表格的第一行解析完成后，用户即可看到整个表格。

当表格的第一行有合并的单元格的时候，被合并的每一列的单独宽度均无法直接调整。举一个例子：

<style>
    table {
		background-color: black;
		border-spacing: 5px;
		table-layout: fixed;
		width: 200px;
		height: 100px;
	}
	td {
		background-color: white;
		padding: 0px;
	}
</style>
<table>
	<tbody>
		<tr>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

无论改变第一行的大单元格的宽度，还是改变第二行的两个小单元格的宽度都无法改变这个表格的宽度布局（因为表格的总体宽度和高度已经由CSS确定了，所以第一行的大单元格的宽度也无法更改）。

如何在固定布局的前提下单独设置列宽呢？

网络上给了一个hack方案。即在第一行之前添加一个设置为height为0px的隐藏行。此时这一行变成了第一行，调整这一行每个单元格的宽度即可单独调整整个表格的列宽。即：

<style>
	table {
		background-color: black;
		border-spacing: 5px;
		table-layout: fixed;
		width: 200px;
		height: 100px;
	}
	td {
		background-color: white;
		padding: 0px;
	}
</style>
<table>
	<tbody>
		<tr style="height: 0px;">
			<td style="width: 50px;"></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

在Chrome下显示基本正常，但是可以发现，表格的上边缘比其他边缘要粗一倍，因为单元格高度设成0之后，单元格间距是不变的，表格上边缘变成了单元格边距与单元格间距之和，于是就造成了粗一倍的不完美效果。此外IE7和8均不支持0高度的表格行。

在翻阅HTML标准之后，我们可以发现，在HTML4和5中都提供了叫colgroup和col的表格元素。此元素就是用来对列进行设置的。所以，符合标准的解决方案如下：

<style>
	table {
		background-color: black;
		border-spacing: 5px;
		table-layout: fixed;
		width: 200px;
		height: 100px;
	}
	td {
		background-color: white;
		padding: 0px;
	}
</style>
<table>
	<colgroup>
		<col style="width: 50px;" />
		<col />
	</colgroup>
	<tbody>
		<tr>
			<td colspan="2"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

IE7 8 9与Chrome下测试正常。