CSS 条纹表格
条纹表格
如何通过CSS设置表格的样式为条纹状，即一行有颜色，一行没有颜色的那种，这类的表格可以用于记录统计样本的数据，即一行一个样本，比如下面的这个表格：
| 姓名 | 数学 | 语文 |
|---|---|---|
| 小明 | 80 | 90 |
| 小强 | 90 | 86 |
| 小杨 | 96 | 85 |
| 小李 | 99 | 91 |
条纹表格设置方法
可以通过:nth-child伪类选择器来匹配查找行数为偶数或奇数的表格行tr元素，语法如下：
tr:nth-child( even | odd ) { background-color: colorValue }
提示：其中的even表示排序为偶数的元素，odd表示奇数，具体可参考：:nth-child选择器中的内容。
CSS 条纹表格实例代码，及在线编辑器
<table id='t2'>
<tr><th scope="col">姓名</th><th scope="col">数学</th><th scope="col">语文</th></tr>
<tr><th scope="row">小林</th><td>81</td><td>89</td></tr>
<tr><th scope="row">小黄</th><td>92</td><td>63</td></tr>
<tr><th scope="row">小宋</th><td>95</td><td>99</td></tr>
<tr><th scope="row">小贝</th><td>85</td><td>93</td></tr>
</table>
<style>
#t2{width:100%;height:150px;}
#t2 th{text-align:center;}
#t2 td{text-align:center;}
#t2 tr:nth-child(even){background-color:rgb(230,230,230);}
</style>