你的位置:首页 > 网页设计

[网页设计]使用border


使用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/