CSS border-collapse 屬性

CSS border-collapse 屬性的功能是用來將表格欄位邊框合併，讓表格變得更美化，網頁設計師常透過 border-collapse 屬性的 separate 或 collapse 屬性值，將表格欄位的邊框距離加大或是合併在一起，border-collapse 常與 border-spacing 屬性搭配在一起設計，取代傳統 HTML 表格的 cellspacing 功能，並獲得更擴展的設計空間，幾乎所有主流的瀏覽器都支援 CSS border-collapse 屬性的效果。

CSS border-collapse 屬性語法

border-collapse: 參數值;

CSS border-collapse 屬性的參數值有三個，分別為 separate、collapse 以及 inherit，寫法如下。

border-collapse:separate; //預設值，邊框彼此間分開
border-collapse:collapse; //邊框合併為單一邊框
border-collapse:inherit; //繼承自父層的 border-collapse 屬性值。

第三種屬性值 inherit 較不受到 IE 瀏覽器的支持，建議不要使用。

CSS border-collapse 屬性範例一、使用屬性值 separate

範例呈現效果

使用 border-collapse 後的表格	使用 border-collapse 後的表格
使用 border-collapse 後的表格	使用 border-collapse 後的表格

範例一呈現的是「border-collapse:separate;」的效果，我們特地將表格欄位的邊框設為黑色，各位可以看到表格欄位邊框彼此之間是分開的，連同與表格的邊框也是分開的，這就是 separate 屬性值的主要功能。如果要讓表格的線條一致，看起來就像是用線條畫出來的表格欄位該怎麼做呢？很簡單，只要將表格的欄位邊框合併在一起即可，請看範例二。

CSS border-collapse 屬性範例二、使用屬性值 collapse

範例呈現效果

使用 border-collapse 後的表格	使用 border-collapse 後的表格
使用 border-collapse 後的表格	使用 border-collapse 後的表格

範例二就是利用了「border-collapse:collapse;」的效果，讓所有表格欄位的邊框都合併起來，然後把邊框同樣設為黑色，看起來就像是用黑線畫出來的表格一樣，以上兩個範例就是常見的 CSS border-collapse 屬性效果。若您對於 HTML 表格的設計規則或是 CSS 的元素邊框設計有興趣，這裡有兩篇深入研究可以閱讀看看。

本篇介紹的 CSS border-collapse 屬性與 HTML 傳統的表格 cellspacing 有點類似。

更多表格設計技巧