你的位置:首页 > 软件开发 > 网页设计 > 使用border

使用border

发布时间:2015-07-14 16:00:18
使用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 (#换成@)。

可能感兴趣文章

我的浏览记录