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> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

例二：作用樣式

以下是引用片段：

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:collapse;">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </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屬性用來指定儲存格內容與儲存格邊界之間的空白距離的大小
。此屬性的參數值也是數字，表示單元格內容與上下邊界之間空白距離的高度所佔像素點數以及單元格內容與左右邊界之間空白距離的寬度所佔的像素點數。

 

 

以上是CSS 表格中的儲存格邊框重疊的border-collapse屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！