用css实现表格行交替变色

最新推荐文章于 2023-11-17 10:00:36 发布
最新推荐文章于 2023-11-17 10:00:36 发布
阅读量1.2k 收藏 1
点赞数
文章标签： css table border class div c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luobo525/article/details/1674918
版权
方法一：
<style>
.db { border-collapse:collapse;}
.db tr{ background-color:expression('#dbdbdb,#EFEFEF'.split(',')[rowIndex%2]); }
</style>
<table width="100%" border="1" class="db">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

方法二：用th标签
<style by tesion.>
th {font-weight: normal; text-align:left; background: #CCCCCC}
td {background: #FAFAFA}
</style>

<table>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
</table>

<p>灵巧地使用table的标签是最高效率的办法</p>

方法三：高级变色
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</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>

方法四：动态表格交替颜色的效果
<style type="text/css">
<!--
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">主标题一</a></li>
<li><a href="#">主标题二</a></li>
<li><a href="#">主标题三</a></li>
<li><a href="#">主标题四</a></li>
</ul>
</div>

 
luobo525
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android横向进度条演示效果
08-28
主要为大家详细介绍了Android横向进度条的演示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用CSS定义表格行背景色交替出现
锋行天下
07-22 2371
应用div+css网页布局，表格的使用已经非常少了，至少table表格只是作为内容数据，并不再作为页面布局的手段。　　表格数据是很常见的数据格式，如产品列表，产品参数，数值等等，有时候表格数据的每一行占据了比较宽的位置，我们往往通过定义行背景色交替，让用户浏览更加的清晰。　　我们可以用CSS定义表格行背景色交替吗？或许你立即就想到了class，用class来定义背景色，然后在不同的行设置不
Android 横向进度条
05-17
Android HorizontalProgressBar 横向进度条右侧有圆点
自定义横向颜色渐变ProgressBar
thb583795948的博客
03-28 773
//完整代码package com.thb.view;import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient;
Android ProgressBar设置成横向进度条并自定义进度条颜色
luochuanrong的博客
12-20 3153
将ProgressBar设置成横向进度条并修改进度条颜色
CSS 样式的简单行颜色交替
weixin_30721077的博客
02-16 425
<style> .db { border-collapse:collapse;} .db tr{ background-color:expression('#dbdbdb,#...
css表格各行颜色交替 tr:nth-child(odd)
小春的博客
09-02 9419
你可以给标题所在行单独设置颜色样式。比如（假定标题在第一个tr标签内）： tr:nth-child(odd) {color:red} //奇数行（从标题行起算，下同）设为红色 tr:nth-child(even) {color:blue} //偶数行设为蓝色 tr:nth-child(1) {color:black} //第一行（标题行）设为黑色 这是标题 这是第1行 这是
CSS day12 移动端布局练习
qq_34620296的博客
09-13 682
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
html语言对奇偶数行设置颜色,纯CSS实现奇偶数行颜色交替(兼容主流浏览器)
weixin_39765339的博客
06-02 1516
做一张li二倍高的背景图,然后,上半部分PS成奇数行颜色,下半部分PS成偶数行颜色,然后将这张图定义给ul任其平铺.这样一来,纵使有万千行,它也会轻而易举的交替颜色...本文DEMO背景图(1*50):CSS部分:.list {width:500px;margin:0 auto;}.list ul {background:url(http://www.bluebirdsky.cn/images/u...
利用CSS控制表格table的交替颜色
09-08
利用CSS控制表格table的交替颜色 代码和讲解部分
CSS Hover表格变色样式特效
07-24
CSS Hover表格变色样式特效是一款表格列表数据，鼠标悬停表格列表变色效果代码。
CSS JS实现表格背景变色.rar
07-05
CSS JS实现表格背景变色
通过css动画实现一个表格滚动轮播效果
12-28
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下 序号 姓名 年龄 性别 专业 </ul>
CSS表格样式：圆角，隔行，变色的具体实现
09-25
常见的CSS表格样式有圆角、隔行、变色等等，下面有个不错的示例，感兴趣的朋友可以参考下
html纯css实现表格样式
01-04
html纯css实现表格样式
Vue2+echarts横向进度条类型颜色渐变柱形图
最新发布
qq_56556465的博客
11-17 826
其实这点不难，x与y轴数据互换一下就可以了。分析完需求，代码如下，每一行都做了注释。3.柱形图两边文字在柱子上方。2.背景有个黑色的总进度条。
android交替色进度条,编程实现自定义ProgressBar样式示例(背景色及一级、二级进度条颜色)...
weixin_35440082的博客
06-03 190
本文实例讲述了Android编程实现自定义ProgressBar样式。分享给大家供大家参考，具体如下：效果图如下，本例中设置了第一级进度条和第二级进度条。 样式资源：progressbar_bg.xml，放在drawable文件夹下：布局代码：android:orientation="vertical"android:layout_width="match_parent"android:layou...
mac下 ionic3 自定义横向进度条渐变色设置
qq_38904099的博客
09-06 634
基于此进度条重复使用频率较高可以简单封装一下 1.在根目录下创建组件 $ ionic g component progress-bar（可以随意起名字）创建成功后，会自动导入到components.module文件，如果自定义的组件需要用到ionic的组件，则需要在此引入IonicModule 2.修改html（根据需求修改）直接上代码   3 scss文件   3.1 ...
css实现选项卡点击变色
05-16
可以通过CSS中的`:active`伪类实现选项卡点击变色的效果。具体操作如下： 1. 确定选项卡的HTML结构，一般为一个ul列表，每个选项卡对应一个li标签。 ``` 选项卡1 选项卡2 选项卡3 ``` 2. 添加CSS样式，为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值