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

最新推荐文章于 2024-04-07 17:33:13 发布

TensorFlow学习

最新推荐文章于 2024-04-07 17:33:13 发布

阅读量8.2k

点赞数

分类专栏： html5 php

95 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

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

CSS代码：

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

页面代码：

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>