使用border-collapse实现细线表格
摘要：使用border-collapse实现细线表格:原生状态的表格边框是令人生厌的，所以对于表格边框的美化是一项重要的工作，下面通过代码实例介绍一下如何利用border-collapse属性实现细线表格效果。代码实例如下:蚂蚁部落 id 作者 书名 内...
使用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.softwhy.com/
相关文章
最新发布
阅读排行
热门文章
猜你喜欢