純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