Web前端·简单粗暴的固定table表格宽度

table表格单元格的宽度是个很玄学的东西
width固定的宽度总是不靠谱
特别是跨行或者夸列合并单元格之后
绝对不是一个width能驾驭了
参考诸多方法之后
想到了一个简单粗暴的方法
简单来说就是
首行隐藏、固定宽度
下面我们来看代码

html部分

<table>
	<!--第一组tr是用来固定宽度的，里面的td赋类名hide，稍后会隐藏-->
	<tr>
		<td class="hide"></td>
		<td class="hide"></td>
		<td class="hide"></td>
		<td class="hide"></td>
		<!--有多少标准宽度的单元格就写多少组td-->
	</tr>
	<!--下面是正常的表格样式，该怎么写怎么写-->
	<tr>
		<td colspan="2"></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td colspan="2"></td>
		<td colspan="2"></td>
	</tr>
</table>

CSS部分

table{
	table-layout: fixed;/*首行统一宽度*/
}
td{
	width:25%;/*赋予单元格宽度*/
}
.hide{
	display:none;/*让跑龙套的第一行单元格隐藏吧*/
}

至此，简单粗暴地固定单元格宽度的方法就完成了
不算精巧，但逻辑简单
有更加巧妙的也请告知我
THX