【CSS】关于table边框,设置了border-collapse:collapse之后,各条边框是怎么合并的

遇到一个边框需要设置圆角的,然后发现在设置了border-collapse:collapse之后,border-radius:5px就不起作用了,就各种查证,发现这个是css本身就存在的,两者不能混在一起使用。所以使用了其他的方式,实现了table的圆角。


但是现在就很想知道,table的border和td、th的border是怎么合并成一条边框的?


类似于table左上角跟第一个th交界的地方,两者边框合并之后,保留的是table的边框,还是th的边框呢?如果说保留的是th的边框,那么我对第一个th的左上角设置border-radius为什么依然没有效果呢?


泻药-v-,正好上周五组内分享的时候说到border-collapse的优先级,w3c关于table的那一节,确实有指示border-collapse: collapse的冲突处理。

文档里面有详细的两个例子,很直观。


这里我在总结一下:(前提border-collapse: collapse)
1. border-style = [hidden|none]
hidden的优先级是最高的,当两个边框产生聚合时,只要任意一个设置了hidden,则最终结果是不显示任何边框;none的优先级是最低的,只要任意一个设置none,就直接以另一个为结果。

正常情况下border-style: hidden 和 border-style: none 都是不显示边框,当当border-collapse: collapse的时候就有区别了。

2. border-width不一致的情况下,以border-width大的为主
3. border-style≠[hidden|none] 并且 border-width一致的情况下,以这个优先顺序:'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
4. 当边框仅仅是color不一样的时候:就按照dom层级结构来了,子element的border样式优于父element的border样式。[cell > row > rowgroup > table];如果层级结构是兄弟关系,以表格是ltr为例,左边、上边优先。

但是呢,特别有意思的是规范没有指明边角处corner的collapse逻辑,,so在chrome和firefox下表现不一样。。
可以在chrome和firefox下分别打开:BQEMea
下图是兄弟td仅仅是color不一致,然后左边是chrome,右边是firefox

1664.png

猜你喜欢

转载自blog.csdn.net/weixin_39068791/article/details/80655410