CSS去除表格的預設間距並且製作1px的細線表

css

現在在所謂“div+css”的風氣下，很多人放棄了表格，其實應該讓每個標籤物盡其用，在表現資料的地方，我們還是應該使用table。但是，我們在建立table的時候，會發現它會具有一些預設的樣式，比如儲存格td之間會有間距，所以我們通常開頭是這樣寫的：

<table border="0" cellspacing="0" cellpadding="0">

在頁面內，通過cellspacing="0"將這個間距消除，合并邊框。現在，我們要一個乾淨的表格table。

<table class="dir">
<caption>如何通過CSS去除表格預設樣式的間距</caption>
 <tr>
   <th>test</th>
   <th>test</th>
   <th>test</th>
 </tr>
 <tr>
   <td>test</td>
   <td>test</td>
   <td>test</td>
 </tr>
</table>

我們只要給這個table一個border-collapse:collapse的樣式，就可以達到這個效果了。

.dir{ width:100%; border-left:#C8B9AE solid 1px;border-top:#C8B9AE solid 1px;border-collapse:collapse;}
.dir td{width:25%;border-right:#C8B9AE solid 1px;border-bottom:#C8B9AE solid 1px;background-color: #D7D1CB;padding:10px 10px 6px;vertical-align: top;}

這樣，我們達到了所需要的效果，並且，上面的css樣式還把表格table定義成了1px的細線表格。

在沒有對table進行內部樣式定義，而通過樣式表，成功的去除td預設的間距，以及定義為1象素的細線表格。真正做到了結構與表現的分離。