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

最新推荐文章于 2024-11-01 07:34:05 发布

lceBear

最新推荐文章于 2024-11-01 07:34:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/sanmen/archive/2012/08/09/2631011.html

本文提供了一个使用CSS实现的双色表格实例，通过选择器针对带有特定类的表格元素进行样式设置，使得表格中奇数行呈现红色背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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