Rumah  >  Artikel  >  hujung hadapan web  >  table边框设置了border-collapse:collapse后各条边框如何合并的?

table边框设置了border-collapse:collapse后各条边框如何合并的?

黄舟
黄舟asal
2017-06-30 09:36:082906semak imbas

遇到一个边框需要设置圆角的,然后发现在设置了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

Atas ialah kandungan terperinci table边框设置了border-collapse:collapse后各条边框如何合并的?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn