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

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

以下為引用的內容：
<table border="0" cellspacing="0" cellpadding="0">

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

以下為引用的內容：

<div style="padding:10px;">
<table class="dir">
 <tr>
   <th width="80">項目名稱</th>
   <th width="20">結果</th>
   <th width="220">備忘</th>
 </tr>
 <tr>
   <td>PHP版本</td>
   <td bgcolor="#60BF60">通過</td>
   <td>PHP 5.1.0或更高版本是必須的。 </td>
 </tr>
 <tr>
   <td>DOM擴充模組  </td>
   <td bgcolor="#60BF60">通過</td>
   <td></td>
 </tr>
 <tr>
   <td>PDO擴充模組  </td>
   <td bgcolor="#60BF60">通過</td>
   <td></td>
 </tr>
 <tr>
   <td>PDO MySQL擴充模組 </td>
   <td bgcolor="#60BF60">通過</td>
   <td>如果使用MySQL資料庫，這是必須的。 </td>
 </tr>
 <tr>
   <td>Memcache擴充模組 </td>
   <td bgcolor="#60BF60">通過</td>
   <td></td>
 </tr>
 <tr>
   <td>SOAP擴充模組 </td>
   <td bgcolor="#60BF60">通過</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
   <td>GD extension with<br />
FreeType support</td>
   <td bgcolor="#60BF60">通過</td>
   <td>&nbsp;</td>
 </tr>
</table>
<div style="padding-top:8px;"><a href="/requirements/" target="_blank" class="easyui-linkbutton">點擊查看詳細資料</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="$.cookie('portal-state', null);$.messager.show({title:'提示',msg:'初始化成功！請重新整理頁面！'});" class="easyui-linkbutton">恢複初始portal順序</a></div>
</div>

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

以下為引用的內容：

<style>
.dir{ width:100%; border-left:#E2E2E2 solid 1px;border-top:#E2E2E2 solid 1px;border-collapse:collapse;}
.dir caption{ text-align:left; font-size:14px;}
.dir th{background-color:#E2E2E2;}
.dir td{border-right:#E2E2E2 solid 1px;border-bottom:#E2E2E2 solid 1px;vertical-align: top; padding:2px;}
</style>

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

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