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

用户bPbJd6V

表现

使用原生tabel标签写表格,由于需要对表头做特殊处理,所以采用两个表格组装的方式写,表头也是用单独的table标签写的。
表格的HTML
发现在Safari浏览器中(包括移动端和PC端),表头被均分了,宽度不是代码里设置的宽度,但是表格主体部分没有被均分,是设好的宽度,就导致表头和主体部分错位,对不上。但是在Chrome,Firefox,IE,edge上都很正常,并无错位

原因

查看colgroup,发现表头和body部分列宽设置是一模一样的,那么可能的原因就是表头部分的colgroup失效colgroup设置
为查找失效原因,查阅了table标签官方文档,发现有如下说明:
colgroup文档
文档中说明,colgroup必须出现在任何可选的caption元素之后,但在任何thead,th,tbody,tfoot和tr元素之前。
发现表头部分的代码里,colgroup标签前面加了一组div标签,导致colgroup失效

解决

基于以上发现,把colgroup前的标签换成caption标签,或者把其他div标签移到最后都可以解决
使用caption标签
感觉可能是由于safari浏览器对于HTML格式要求比较严格,所以有这种表现,除safari外的浏览器都能够找到正确的colgroup来设置width

阅读 958
2 声望
0 粉丝
0 条评论
2 声望
0 粉丝
文章目录
宣传栏