border-collapse實現表格細線邊框

　　雖然在xhtml+css 時代 table的使用越來越少，但需要布局數據型元素，用table還是很不錯的選擇。

      用table制作表格的時候美觀也很重要，其中的邊框。在HTML中,表格的默認樣式大概是這樣:

      默認的樣式雖然有點立體的感覺，但它在整體布局中並不是很美觀，通常情況下,我們會把table屬性的cellspacing設成1,然后為整個表格設一 個背景色;或是設置table的border為0，然后為所有td設置border-left和border-right,可以得到如下效果：

      這種方法比較常用，但是有些復雜，而且如果表格內容為空的情況下IE會不顯示邊框。

      另一種方法就是用CSS中的border-collapse屬性,它有兩個參數

值	描述
separate	邊框會被分開。
collapse	默認。如果可能，邊框會被合並為一個單一的邊框。

       這里我們會用到： border-collapse:collapse; 在table中加入border-collapse:collapse;屬性，並設置border為0,設置td{border:1px solid #ccc;}邊框。就可以得到與第一種方法相同的效果。這種方法相對簡單，而且在表格內容為空的情況下，邊框不會出現不顯示的情況。

CSS代碼
table {
    border-collapse:collapse;
}
td {
    border:1px solid #666;
}

簡單TABLE代碼
<table border="0">  
  <tr>  
    <td>1</td><td>2</td><td>3</td><td>4</td>  
  </tr>  
  <tr>  
    <td>5</td><td>6</td><td>7</td><td>8</td>  
  </tr>  
  <tr>  
    <td>9</td><td>10</td><td>11</td><td>12</td>  
  </tr>  
</table>  

下面順便帶上CSS border-collapse 屬性：

CSS border-collapse 屬性

定義
border-collapse 屬性設置表格的邊框是否被合並為一個單一的邊框，還是象在標准的 HTML 中那樣分開顯示。
繼承性：Yes

腳本語法：
CSS 屬性也可通過一段 JavaScript 被動態地改變。
object.style.borderCollapse="collapse"

例子

table {
    border-collapse: separate;
}

可能的值

 

值	描述
separate	邊框會被分開。
collapse	默認。如果可能，邊框會被合並為一個單一的邊框。