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>
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