解决Safari浏览器下colgroup失效导致表格列宽均分

表现

使用原生tabel标签写表格，由于需要对表头做特殊处理，所以采用两个表格组装的方式写，表头也是用单独的table标签写的。

发现在Safari浏览器中（包括移动端和PC端），表头被均分了，宽度不是代码里设置的宽度，但是表格主体部分没有被均分，是设好的宽度，就导致表头和主体部分错位，对不上。但是在Chrome，Firefox，IE，edge上都很正常，并无错位

原因

查看colgroup，发现表头和body部分列宽设置是一模一样的，那么可能的原因就是表头部分的colgroup失效
为查找失效原因，查阅了table标签官方文档，发现有如下说明：

文档中说明，colgroup必须出现在任何可选的caption元素之后，但在任何thead，th，tbody，tfoot和tr元素之前。
发现表头部分的代码里，colgroup标签前面加了一组div标签，导致colgroup失效

解决

基于以上发现，把colgroup前的标签换成caption标签，或者把其他div标签移到最后都可以解决

感觉可能是由于safari浏览器对于HTML格式要求比较严格，所以有这种表现，除safari外的浏览器都能够找到正确的colgroup来设置width