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的时候就有区别了。

知了zKnown

知了zKnown：致力于信息降噪 / 阅读提效的个人知识助手。

65

查看详情

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

以上就是table边框设置了border-collapse:collapse后各条边框如何合并的？的详细内容，更多请关注php中文网其它相关文章！