纯CSS table 表格奇偶行不同颜色实现

CSS代码

.table-striped tbody tr:nth-child(odd) td {

background-color: Red;
}

页面代码

1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>双色表格CSS实例</title>
5 <style type="text/css">
6 .table-striped tbody tr:nth-child(odd) td,
7 .table-striped tbody tr:nth-child(odd) th {
8   background-color: Red;
9 }
10 </style>
11 </head>
12 <body>
13 <table cellspacing="1" class="table-striped" ID="DataGrid1">
14   <tr>
15     <td>首行首列</td>
16     <td>首行</td>
17     <td>首行</td>
18     <td>首行</td>
19     <td>首行</td>
20     <td>首行</td>
21   </tr>
22   <tr>
23     <td>行1首列</td>
24     <td>行1</td>
25     <td>行1</td>
26     <td>行1</td>
27     <td>行1</td>
28     <td>行1</td>
29   </tr>
30   <tr>
31     <td>行2首列</td>
32     <td>行2</td>
33     <td>行2</td>
34     <td>行2</td>
35     <td>行2</td>
36     <td>行2</td>
37   </tr>
38   <tr>
39     <td>行3首列</td>
40     <td>行3</td>
41     <td>行3</td>
42     <td>行3</td>
43     <td>行3</td>
44     <td>行3</td>
45   </tr>
46   <tr>
47     <td>行4首列</td>
48     <td>行4</td>
49     <td>行4</td>
50     <td>行4</td>
51     <td>行4</td>
52     <td>行4</td>
53   </tr>
54   <tr>
55     <td>行5首列</td>
56     <td>行5</td>
57     <td>行5</td>
58     <td>行5</td>
59     <td>行5</td>
60     <td>行5</td>
61   </tr>
62 </table>
63 </body>

64 </html>

借鉴自推特的UI 框架bootstrap