table，colspan导致子td设置宽度无效的问题

当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里的宽度可以自行设置。