使用border-collapse实现细线表格

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

你可能感兴趣的:(border)