当table中出现跨列的表头时,一般会在table加上属性style="table-layout:fixed;",来达到自适应宽度。
<table style="table-layout:fixed;">
<tr id="parent">
<td colspan="2" style="width:100px;">基本信息</td>
<td colspan="3" style="width:150px;">工作</td>
</tr>
<tr id="child">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</tbody>
</table>
比如上方,理论上来讲,child里的td,应该宽度都时50px;但由于屏幕分辨率,浏览器等原因,都不会很精确。比如会拉长到50.xx,51.xx 都有可能。有时候,为了精确设置child里td的宽度,必须整整。
可以选择在parent和child中加入<colgroup></colgroup>来精确设置td的宽度,如下:
<table style="table-layout:fixed;">
<tr id="parent">
<td colspan="2">基本信息</td>
<td colspan="3">工作</td>
</tr>
<colgroup span="2" style="width:50px;"></colgroup>
<colgroup span="3" style="width:50px;"></colgroup>
<tr id="child">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</tbody>
</table>
即可将child里的td精确为50px;
经过测试在谷歌浏览器里,能达到预期的效果,但在火狐,edge就不行了。
这时,就要使用另一个table标签了:<col />
这个标签,相当于对应到每个td
<colgroup>
<col style="width:50px;"/>
<col style="width:50px;"/>
</colgroup>
<colgroup>
<col style="width:50px;"/>
<col style="width:50px;"/>
<col style="width:50px;"/>
</colgroup>
col里的宽度可以自行设置。