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>

全栈编程 / CSS教程(可向下滚动)：