2009/02/13

邊線衝突解決法

邊線衝突解決法(border conflict resolution)是指,當 TABLE 元素設為 collapse 時;TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TR, TD, TH 等元素,都可以各自設定邊線。當多層的父子元素設置不同邊線時,會依下列原則決定小格子(cell)的邊線。

  1. border-style 設為 hidden,有最高優先權。會蓋過父子元素的邊線。
  2. border-style 設為 none,其優先權最低。會在父子元素間被其它設定蓋掉。父子元素全都是 none 時才會有效。
  3. 寬的邊線設定,其優先權高於細的邊線。邊線寬度相同時,border-style 的優先順序是:double, solid, dashed, dotted, ridge, outset, groove, inset。
  4. 當 border-style 只有顏色不同時,越靠近格子的設定,優先權越高;越外層優先權越低。橫列的優先權高於直行。

試用 CAPTION, THEAD, TBODY, TFOOT 的邊線

  • 在 IE6 中,THEAD, TBODY, TFOOT 不能設邊線。Firefox, Safari, Chrome 都可以設。

試用 COL, TR 的邊線

  • 在 IE6 中,COL, TR 不能設邊線。Firefox, Safari, Chrome 都可以設。上例中,橫列的優先權高於直行。

hidden 與 none

  • 上面第一例顯示,越靠近小格子,優先權越高;越外層優先權越低。第二例的 COL 設了 border:hidden,可看出 COL 的父元素 TABLE,與其子元素 TD 的邊線都被藏起來了。第三例設了 border:none,父元素與子元素都會蓋過它。此例不能在 IE6 展現;Firefox, Safari, Chrome 都成功。

邊線寬度與型態

  • 上面第二例顯示,寬的邊線會蓋過細的邊線。第三例的 dotted 優先權低於 solid。此例不能在 IE6 展現;Firefox, Safari, Crome 都成功。