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

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

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

直接贴链接:

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

这里我在总结一下:(前提border-collapse: collapse)

1. border-style = [hidden|none]

hidden的优先级是最高的,当两个边框产生聚合时,只要任意一个设置了hidden,则最终结果是不显示任何边框;none的优先级是最低的,只要任意一个设置none,就直接以另一个为结果。

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为例,左边、上边优先。

另外对于border-radius无效,见文档: