使用border-collapse實現細線表格

標籤：

使用border-collapse實現細線表格:

原生狀態的表格邊框是令人生厭的，所以對於表格邊框的美化是一項重要的工作，下面通過代碼執行個體介紹一下如何利用border-collapse屬性實現細線表格效果。

代碼執行個體如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>螞蟻部落</title><style type="text/css">.table{  border:1px solid #ccc;  border-collapse:collapse;  width:80%;}.table th, .table td{  border:1px solid #ccc;  padding:10px;  text-align:center;}</style></head><body><table class="table">  <thead>    <tr>      <th>id</th>      <th>作者</th>      <th>書名</th>      <th>內容</th>      <th>分類</th>    </tr>  </thead>  <tbody>    <tr>      <td>一</td>      <td>螞蟻部落一</td>      <td>螞蟻部落二</td>      <td>螞蟻部落三</td>      <td>螞蟻部落四</td>    </tr>    <tr class="success">      <td>二</td>      <td>螞蟻部落一</td>      <td>螞蟻部落二</td>      <td>螞蟻部落三</td>      <td>螞蟻部落四</td>    </tr>  </tbody></table></body></html>

以上代碼實現了我們的要求，完美實現了表格的細線表格效果。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0612/4020.html

最為原始地址是:http://www.softwhy.com/ 

使用border-collapse實現細線表格