2008/11/11

border-collapse

以下特徵可以用來設定報表(TABLE)內的小格子(cell)的邊線之展現方法。另外也可以用 border, padding, outline 設定格子的邊界。

border-collapse | border-spacing | empty-cells
border-collapse

設定報表(TABLE)內的格子的邊線,有兩種風格,可設定的值有:

  • collapse:所有的邊線都連在一起,此為預設值。TABLE 元素的邊線重疊時,要依據 邊線衝突解決法
  • separate:每一個格子都有各自的邊線。雖然官方手冊說 collapse 是預設值,可是下面的範例顯示,主要的瀏覽器都將 separate 定為預設值。
  • inherit:繼承父元件的特徵值。
  • 上面第一個例子用 collapse,第二個例子用預設的 separate。
  • 第三個例子,在 COL 元素與 TR 元素加上邊線,必須配合 collapse 使用;使用 separate 會失效。第三個例子在 IE6 失敗;Firefox, Safari, Chrome 成功。

設定 margin, outline, padding

  • 上例中 border 是紅色,outline 是白色。border-spacing 設的太小時,outline 會連在一起。padding 有效果,但是 margin 沒效果,margin 被 border-spacing 取代。IE6 沒有支援 outline。
  • 第二個例子用 collapse,此時 border-spacing 會失效。第二例的展現結果在不同瀏覽器有不同。