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