使用css选择器实现表格隔行换色_css选择器

使用css选择器实现表格隔行换色

<style>
  *{
    margin: 0;
    padding: 0;
  }
  body{
    padding: 200px;
    box-sizing: border-box;
  }
  table{
    border-collapse: collapse;
  }
  td,th{
    color: #000;
    font-size: 16px;
    line-height: 30px;
    border: 1px solid #333;
    padding: 0 15px;
    box-sizing: border-box;
  }
  tbody tr:nth-child(odd){
      background: rgba(204,255,255,.6);
  }
</style>
<table>
  <thead>
    <tr>
      <th>共享博客</th>
      <th>共享博客</th>
      <th>共享博客</th>
      <th>共享博客</th>
      <th>共享博客</th>
      <th>共享博客</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
    </tr>
    <tr>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
    </tr>
    <tr>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
    </tr>
    <tr>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
    </tr>
    <tr>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
      <td>鹏仔先生</td>
    </tr>
  </tbody>
</table>

设置表格奇数行变色

tbody tr:nth-child(odd){
    background: #f7f8f9;
}

设置表格偶数行变色

table tr:nth-child(even){
    background: #f7f8f9;
}

扩展一：表格边框合并

table{
  border-collapse: collapse;
}

扩展二：带有 thead、tbody、tfoot 元素的 HTML 表格


<thead></thead>

标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。


<tfoot></tfoot>

标签定义表格的页脚（脚注或表注）


<tbody></tbody>

标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。



相关教程

css 结构性伪类选择器 ​​http://sharedblog.cn/post/119.html​​

前端共享博客 ​​http://sharedblog.cn/​​