使用border-collapse实现细线表格:原生状态的表格边框是令人生厌的,所以对于表格边框的美化是一项重要的工作,下面通过代码实例介绍一下如何利用border-collapse属性实现细线表格效果。代码实例如下:<!DOCTYPE html><html&g ...
使用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>
原标题:使用border
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。