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

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

html部分

<table>
	
	<tr>
		<td class="hide">td>
		<td class="hide">td>
		<td class="hide">td>
		<td class="hide">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

你可能感兴趣的:(HTML·CSS,前端)