關於table邊框,設定了border-collapse:collapse之後,各條邊框是怎麼合併的?
阿新 • • 發佈:2019-01-27
瀉藥-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的時候就有區別了。
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