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