CSS 表格中的儲存格邊框重疊的border-collapse屬性

文法：border-collapse : separate | collapse

取值：
separate :　 預設值。邊框獨立(標準HTML)
collapse :　 相鄰邊被合并

說明：
設定或檢索表格的行和儲存格的邊是合并在一起還是按照標準的HTML樣式分開。
此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
對應的指令碼特性為 borderCollapse 。

樣本：

table { border-collapse: separate; }

應用於：
IE5.0+ currentStyle runtimeStyle style TABLE

例一：沒用樣式

以下是引用片段：

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr></table>

例二：作用樣式

以下是引用片段：

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:collapse;">   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr></table>

table width=1 就已經把寬度設定為 1 了
我們面臨的問題是這樣的，每一個 td 邊線都是 1px，table 邊線也是 1px。那麼當兩個td相鄰的時候，因為每個 td 邊線都是1，所以靠進的時候邊線的“寬度和”就是 1+1=2。當 td 和 table 相鄰時，同樣。

collapse :　 相鄰邊被合并

相鄰邊被合并！以前我說的 1+1=2 就是因為 td 和td之間，td 和table 之間相鄰邊的問題。預設時相鄰邊沒有合并，所以就是 1+1=2。現在我們使用 border-collapse:collapse把我們合并了，所以寬度還是 1px。也就是出現細線邊框了。

cellspacing設定為“0”，顯示的結果就是第一個表格的每個儲存格之間的距離為0。若將表格邊框設為“0”，則儲存格 的距離就是0了
cellpadding屬性用來指定儲存格內容與儲存格邊界之間的空白距離的大小
。此屬性的參數值也是數字，表示儲存格內容與上下邊界之間空白距離的高度所佔像素點數以及儲存格內容與左右邊界之間空白距離的寬度所佔的像素點數。