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

 

这篇关于使用css选择器实现表格隔行换色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---