在css表格中实现隔行换色效果

最新推荐文章于 2022-12-30 00:40:13 发布
最新推荐文章于 2022-12-30 00:40:13 发布
阅读量1.9k 收藏 8
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44543272/article/details/88188568
版权

                                                        在CSS表格中实现隔行换色效果

 

 

         表格背景可以用颜色或图片，这样可以可以使表格看起来不那么单一，我们可以让其每一行的颜色发生改变，使用nth-of-type(odd)和nth-of-type(even)会有两种不同的效果。

odd   :匹配所有索引值为奇数的元素，从 0 开始计数.查找表格的2、4、6行（即索引值1、3、5...）

代码如下：


效果如下：

even  :匹配所有索引值为偶数的元素，从 0 开始计数.查找表格的1、3、5...行（即索引值0、2、4...）

代码如下：

 


效果如下：

 

 

相忘一江湖
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用html css javascript实现表格隔行变色效果
weiyuyang250的博客
10-11 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
css实现表格奇偶行变色
weixin_43535265的博客
03-05 3303
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .ta{ border-collapse: collapse; border-color: blue; width: 100%; } tr:nth-child(odd){ background-c
css3隔行换色
qq_48445738的博客
07-14 739
今天给大家介绍个css3的选择器nth-of-type() :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 /* 在每组兄弟元素中选择第四个 <p> 元素 */ p:nth-of-type(4n) { color: lime; } 现在有这样的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
css 设置元素样式隔行变色
qwyio的博客
05-25 2643
:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 odd 奇数行 even 偶数行 效果图 页面 <template> <div class="page-container"> <transition-group tag="ul" appear> <li v-for="item in 10" :key="item"> {{ item % 2 == 0 ...
表格css样式 ——表格背景，隔行变色，触摸表格变色
LiHang1234567777的博客
07-14 2445
我来给大家讲解一下代码如下（示例）：首先：先写一个表格 序号 商品名称 单价/元 数量 商品名称 单价/元 ...
HTML使用CSS实现表格隔行变色
weixin_70815247的博客
07-14 4262
HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
CSS表格隔行变色
闪电⚡之王的博客简介
12-30 456
【代码】CSS表格隔行变色。
CSS2实现的隔行换色
10-30
CSS2实现的隔行换色是使用CSS2的相邻选择符来实现的，该技术可以实现表格的隔行换色效果。该技术的优点是无需使用JavaScript脚本和class样式，只需使用CSS代码即可实现该效果。 首先，我们需要了解CSS2的相邻选择符...
实现表格隔行换色效果特效代码
03-20
总的来说，实现表格隔行换色是网页开发中的基础技能，通过CSS的选择器或类，我们可以轻松地为表格赋予视觉上的层次感，提高用户体验。无论是纯HTML/CSS项目还是结合JavaScript的动态页面，这个技巧都是不可或缺的。
JS+CSS实现Li列表隔行换色效果的方法
10-24
在网页设计中，隔行换色的列表效果是一种常见的视觉增强技术，用于提高用户阅读体验。本篇将介绍如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现 `li` 列表元素的隔行换色效果。首先，我们需要理解 ...
CSS2+JS实现table隔行变色
05-07
CSS2+JS实现table隔行变色,简单易懂，拿来改改就可以用
CSS实现网页中的隔行换色代码
12-11
在早期的网页设计中，通常使用HTML表格来实现这一效果，但在CSS逐渐成为主流的布局和样式控制语言后，设计师们面临了如何在标准网页布局中实现隔行换色的挑战。 在CSS标准布局中，我们通常用`<ul>`和`<li>`元素替代...
JS实现隔行换色的表格排序
10-20
在本文中，我们将探讨如何使用JavaScript实现一个功能丰富的表格，包括隔行换色和排序功能。首先，让我们逐个解析这个任务涉及的关键知识点。 1. **获取元素**：在JavaScript中，我们可以使用不同的方法来获取页面...
前端html利用CSS实现table表格斑马纹隔行换色效果
热门推荐
我是Sinlion
09-07 1万+
在网页中，表格是一种常用的数据展示方式，如下面的实例就是一个收支数据的表格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
纯CSS3实现table表格隔行变色并hover变色。
kstg5208197的博客
03-30 7915
纯CSS3实现table表格隔行变色并hover变色。 先看下效果图 关键CSS代码介绍 1 2 3 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-c
<center>使用CSS3实现表格隔行/隔列变色</center>
mikibiubiu的博客
09-19 1668
废话少说，先看效果，如果不是你想要的，你可以撤了~ 这些都是css控制的，然后我们看下样式： table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73B1E0;color:#FFF;} 分别选择为：奇数行、偶数列、...
html table隔行变色,使用CSS3实现表格隔行/隔列变色
weixin_42314680的博客
06-10 1808
废话少说，先看效果，如果不是你想要的，你可以撤了~这些都是css控制的，然后我们看下样式：table tr:nth-child(odd){background:#F4F4F4;}table td:nth-child(even){color:#C00;}table tr:nth-child(5){background:#73B1E0;color:#FFF;}分别选择为：奇数行、偶数列、第五行，下面是...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
3.1 CSS表格隔行异色
06-12
在CSS中，可以使用伪类选择器 `:nth-child` 来实现隔行异色。具体方法如下： ```css tr:nth-child(odd) { background-color: #f2f2f2; /* 设置奇数行背景色 */ } tr:nth-child(even) { background-color: #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值