解决Safari浏览器下colgroup失效导致表格列宽均分
表现
使用原生tabel标签写表格，由于需要对表头做特殊处理，所以采用两个表格组装的方式写，表头也是用单独的table标签写的。
文章图片
发现在Safari浏览器中（包括移动端和PC端），表头被均分了，宽度不是代码里设置的宽度，但是表格主体部分没有被均分，是设好的宽度，就导致表头和主体部分错位，对不上。但是在Chrome，Firefox，IE，edge上都很正常，并无错位
原因
查看colgroup，发现表头和body部分列宽设置是一模一样的，那么可能的原因就是表头部分的colgroup失效
文章图片
为查找失效原因，查阅了table标签官方文档，发现有如下说明：
文章图片
文档中说明，colgroup必须出现在任何可选的caption元素之后，但在任何thead，th，tbody，tfoot和tr元素之前。
发现表头部分的代码里，colgroup标签前面加了一组div标签，导致colgroup失效
解决
【解决Safari浏览器下colgroup失效导致表格列宽均分】基于以上发现，把colgroup前的标签换成caption标签，或者把其他div标签移到最后都可以解决
文章图片
感觉可能是由于safari浏览器对于HTML格式要求比较严格，所以有这种表现，除safari外的浏览器都能够找到正确的colgroup来设置width
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- SpringBoot调用公共模块的自定义注解失效的解决
- 解决SpringBoot引用别的模块无法注入的问题
- 操作系统|[译]从内部了解现代浏览器(1)
- Spark|Spark 数据倾斜及其解决方案
- 解决SyntaxError:|解决SyntaxError: invalid syntax
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- Spectrum|Spectrum 区块偶尔停止同步问题排查与解决笔记