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

本文提供了一个使用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值