纯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
posted @ 2012-08-09 22:33  三岔路  阅读(6809)  评论(0)  编辑  收藏  举报