使用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/
时间: 2024-11-29 06:18:38