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

关于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为什么依然没有效果呢？

关注者

76

被浏览

4962

添加评论

分享

邀请回答

收起

关注问题写回答

2 个回答

默认排序





张磊

孜孜不倦，锲而不舍

40 人赞同了该回答

泻药-v-，正好上周五组内分享的时候说到border-collapse的优先级，w3c关于table的那一节，确实有指示border-collapse: collapse的冲突处理。
直接贴链接：Tables
文档里面有详细的两个例子，很直观。
这里我在总结一下：（前提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



另外对于border-radius无效，见文档：CSS Backgrounds and Borders Module Level
3

编辑于 2016-12-25

40

3 条评论

分享

收藏

感谢
收起





谢然

在小米和阿里做过前端，也在省重点高中教过书，现在办前端培训是因为热爱教育。

3 人赞同了该回答

《CSS权威指南》第三版360页：