【css】nth-child选择器实现表格的斑马纹效果

news2024/10/6 10:28:16

nth-child() 选择器可以实现为所有偶数(或奇数)的表格行添加css样式,even:偶数,odd:奇数。

代码:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}//基数偶数子元素选择器
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>

渲染效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/825653.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

试卷还原成空白卷怎么做?分享个简单的方法

在进行考试时&#xff0c;可能会填错答案或想要重新测试&#xff0c;此时需要正确擦除填写的试卷答案。下面介绍一些需要注意的事项以及正确的擦除方法。 使用橡皮擦或橡皮 正确的擦除方法是使用橡皮擦或橡皮对填写的答案进行擦除。首先&#xff0c;将橡皮擦或橡皮放置在试卷上…

垃圾回收机制和常用的算法

一.什么是垃圾回收&#xff1f; 垃圾回收主要针对堆和方法区&#xff08;非堆&#xff09;,程序计数器&#xff0c;虚拟机栈&#xff0c;本地方法栈这三个区域属于线程私有&#xff0c;随着线程的销毁&#xff0c;自然就会雄安会了&#xff0c;因此不需要堆着三个区域进行垃圾…

114.(cesium篇)cesium去掉时间轴并用按钮控制运动

地图之家总目录(订阅之前必须详细了解该博客) 地图之家:cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: cesium去掉时间轴并用按钮控制运动 下面献上完整代码,代码重要位…

剔除多余括号 C++详解

剔除多余括号 C详解 题目描述输入输出样例输入样例输出样例 解法&代码 题目描述 剔除四则运算表达式中的多余括号。 输入一个含有括号的四则运算表达式&#xff0c;可能含有多余的括号&#xff0c;编程整理该表达式&#xff0c;去掉所有多余的括号&#xff0c;原表达式中所…

管理类联考——逻辑——形式逻辑——汇总篇

简述 形式逻辑&#xff1a; 识别题型&#xff1a;逻辑符号表达及标志词&#xff1a;联假言符号化特殊命题“除非否则”&#xff1b;五大关系&#xff1a;矛盾、等价、包含、至少有一真、至少有一假&#xff1b;【通过“关系”&#xff0c;串联起“假联选”言】 识别题型&…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(23)-Fiddler如何优雅地在正式和测试环境来回切换-上篇

1.简介 在开发或者测试的过程中&#xff0c;由于项目环境比较多&#xff0c;往往需要来来回回地反复切换&#xff0c;那么如何优雅地切换呢&#xff1f;今天介绍几种方法供小伙伴或者童鞋们进行参考。 2.实际工作场景 2.1问题场景 &#xff08;1&#xff09;已发布线上APP出…

1-3 AUTOSAR标准化接口

AUTOSAR标准化接口 AUTOSAR规范中&#xff0c;将不同模块间通信的接口主要分为以下三类&#xff1a; 标准接口&#xff08;Standardized Interface&#xff09; 在AUTOSAR规范中以C语言中API的形式明确定义。主要用于ECU上的BSW各模块间、RTE和操作系统间、RTE和通信模块间&am…

页面技术基础-html

页面技术基础-html 环境准备&#xff1a;在JDBC中项目上完成代码定义 1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish 2. 在 Moudle上右键-》第二个选项&#xff1a;add framework .. -> 选择JavaEE下第一个选项 Web Apllicat…

Pytorch深度学习-----神经网络之线性层用法

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…

[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换

系列文章目录 第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测 第四章 绘制Q版地图、键盘上下左右地图场景切换 文章目录 系列文章目录前言一、本章节…

Spring?Boot项目如何优雅实现Excel导入与导出功能

目录 背景EasyExcel 问题分析与解决Spring Boot Excel 导入与导出 依赖引入Excel 导入 基本导入功能进阶导入功能Excel 导出 Excel 导入参数校验 开启校验 校验规则定义 Bean Validation 定义校验规则ExcelValidator 接口定义校验规则校验结果接收 异常捕获接收校验结果contro…

无涯教程-Lua - 垃圾回收

Lua使用自动内存管理&#xff0c;该管理使用基于Lua内置的某些算法的垃圾回收。 垃圾收集器暂停 垃圾收集器暂停用于控制垃圾收集器之前需要等待多长时间&#xff1b; Lua的自动内存管理再次调用它。值小于100意味着Lua将不等待下一个周期。同样&#xff0c;此值的较高值将导…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(21)-如何使用Fiddler生成Jmeter脚本-上篇

1.简介 我们知道Jmeter本身可以录制脚本&#xff0c;也可以通过BadBoy&#xff0c;BlazeMeter等工具进行录制&#xff0c;其实Fiddler也可以录制Jmter脚本&#xff08;而且有些页面&#xff0c;由于安全设置等原因&#xff0c;使用Jmeter直接无法打开录制时&#xff0c;这时就…

PyQT模块、类、控件介绍

最近在搞一些基于PyQT的开发&#xff0c;开发过程中一直对PyQT相关模块、类、控件比较模糊&#xff0c;于是花了一些力气&#xff0c;去收集和整理了一下PyQT的一些基础&#xff0c;希望对大家有帮助&#xff01; PyQT模块 QtCore模块涵盖了包的核心的非GUI功能&#xff0c;此模…

windows 安装 Mysql 5.7 和8.0

下载链接 https://dev.mysql.com/downloads/mysql/

【echarts饼图】legend显示data中的name和value

效果图&#xff1a; legend自定义显示格式&#xff1a; legend: {formatter: function (name) {let v;optionCheck.series.data.forEach((item) > {if (item.name name) {v item.value;}});return name v;},},全部配置项&#xff1a; const optionCheck reactive(…

Shell脚本学习-MySQL单实例和多实例启动脚本

已知MySQL多实例启动命令为&#xff1a; mysqld_safe --defaults-file/data/3306/my.cnf & 停止命令为&#xff1a; mysqladmin -uroot -pchang123 -S /data/3306/mysql.sock shutdown 请完成mysql多实例的启动脚本的编写&#xff1a; 问题分析&#xff1a; 要想写出脚…

BES 平台 SDK之提示音的添加

本文章是基于BES2700 芯片&#xff0c;其他BESxxx 芯片可做参考&#xff0c;如有不当之处&#xff0c;欢迎评论区留言指出。仅供参考学习用&#xff01; BES 平台 SDK之按键的配置_谢文浩的博客-CSDN博客 关于系统按键简介可参考上一篇文章。链接如上所示&#xff01; 一&am…

工作流管理软件的好处:提升效率、优化流程的利器

一旦您投资了工作流管理系统&#xff0c;就没有回头路了。这是让您的员工满意的完美公式&#xff0c;同时确保所有流程以最高效率和及时完成。事实证明&#xff0c;这些实用的工作流程管理工具对为其客户提供基于知识的专业服务的组织有益&#xff08;在我们的专业服务指南中了…

【3维视觉】3D空间常用算法(点到直线距离、面法线、二面角)

3D空间点到直线的距离 3D空间点到直线的距离 3D空间的曲率 三维空间有三个基本元素&#xff0c;点&#xff0c;线&#xff0c;面。那么曲率是如何定义的呢&#xff1f; 点的曲率&#xff1f; 线的曲率&#xff1f; 面的曲率&#xff1f; 法曲率 设曲面上的曲线在某一点处的切…