纯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

转载于:https://www.cnblogs.com/sanmen/archive/2012/08/09/2631011.html