利用css实现表格的隔行换色

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

jawsy

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

阅读量729

点赞数

文章标签： css table

本文介绍了一种使用HTML和CSS表达式来为表格行和单元格设置背景颜色的方法，通过简单的代码实现了不同行和列的交替颜色显示，增强了表格的可读性和美观度。

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

下面是实现的代码:

< style type ="text/css" >

</ style >
</ HEAD >
< table >
< tr >
< td > 第1行 </ td >< td > 第1行 </ td >
</ tr >
< tr >
< td > 第2行 </ td >< td > 第2行 </ td >
</ tr >
< tr >
< td > 第3行 </ td >< td > 第3行 </ td >
</ tr >
< tr >
< td > 第4行 </ td >< td > 第4行 </ td >
</ tr >
< tr >
< td > 第5行 </ td >< td > 第5行 </ td >
</ tr >
</ table >

关键就是这一句:

tr {background-color:expression((this.sectionRowIndex==0)?"":
(this.sectionRowIndex%2==0)?"red":"blue")}

对于td的控制如下:

< style type ="text/css" >

</ style >
</ HEAD >
< table >
< tr >< td > 第1行 </ td >< td > 第1行 </ td >< td > 第1行 < /td >< td > 第1行 </ td >< td > 第1行 </ td ></ tr >
< tr >< td > 第2行 </ td >< td > 第2行 </ td >< td > 第2行 < /td >< td > 第2行 </ td >< td > 第2行 </ td ></ tr >
< tr >< td > 第3行 </ td >< td > 第3行 </ td >< td > 第3行 < /td >< td > 第3行 </ td >< td > 第3行 </ td ></ tr >
< tr >< td > 第4行 </ td >< td > 第4行 </ td >< td > 第4行 < /td >< td > 第4行 </ td >< td > 第4行 </ td ></ tr >
< tr >< td > 第5行 </ td >< td > 第5行 </ td >< td > 第5行 < /td >< td > 第5行 </ td >< td > 第5行 </ td ></ tr >
</ table >

即 cellIndex　

另:和数组一样，第一行从0开始