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

[摘要]本文介绍纯CSS实现 table 表格奇偶行不同颜色,并提供详细的示例代码供参考。

CSS代码:

View Row Code
1 .table-striped tbody tr:nth-child(odd) td {
2 background-color: Red  ;
3 }

页面代码:

View Row Code
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>行1td>
25 <td>行1td>
26 <td>行1td>
27 <td>行1td>
28 <td>行1td>
29 tr>
30 <tr>
31 <td>行2首列td>
32 <td>行2td>
33 <td>行2td>
34 <td>行2td>
35 <td>行2td>
36 <td>行2td>
37 tr>
38 <tr>
39 <td>行3首列td>
40 <td>行3td>
41 <td>行3td>
42 <td>行3td>
43 <td>行3td>
44 <td>行3td>
45 tr>
46 <tr>
47 <td>行4首列td>
48 <td>行4td>
49 <td>行4td>
50 <td>行4td>
51 <td>行4td>
52 <td>行4td>
53 tr>
54 <tr>
55 <td>行5首列td>
56 <td>行5td>
57 <td>行5td>
58 <td>行5td>
59 <td>行5td>
60 <td>行5td>
61 tr>
62 table>
63 body>

你可能感兴趣的:(html5,php)