当前位置: 首页 > news >正文

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

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.lryc.cn/news/108637.html

相关文章:

  • 找视频素材就上这8个网站,免费可商用,马住了。
  • Springboot部署ELK实战
  • 【Leetcode】76.最小覆盖子串(困难)
  • C++ 指针函数和函数指针
  • JAVA实现存在更新不存在插入与及多余的进行删除(三)
  • iMX6ULL驱动开发 | OLED显示屏SPI驱动实现(SH1106,ssd1306)
  • 拥抱创新:用Kotlin开发高效Android应用
  • Effective Java笔记(20)接口优于抽象类
  • react学习笔记——1. hello react
  • 明明已经安装字体,但IDEA、CLION无法找到思源黑体/Source Hans Sans的问题解决
  • 2023-08-03力扣今日四题
  • 【学会动态规划】最佳买卖股票时机含冷冻期(15)
  • 随机RSI震荡指标公式(StochRSI),RSI和KDJ二合一
  • 轻松搭建酒店小程序
  • 算法通过村——Hash和队列问题解析
  • 租赁类小程序定制开发|租赁管理系统源码|免押租赁系统开发
  • 后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则(三)
  • Mac 安装不在 Apple 商店授权的应用程序
  • 【MyBatis】MyBatis把空字符串转换成0的问题处理方案(96)
  • OpenLayers实战,OpenLayers获取移动端精确定位,OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
  • Go指针取址问题:循环后每次都拿到相同内容
  • 用Rust实现23种设计模式之简单工厂
  • SpringBoot + minio实现分片上传、秒传、续传
  • logback 里面设置 自动删除3天之前的日志
  • 对于数据库查询索引和查字典索引的理解
  • git删除已经提交的大文件
  • 【数据分析】pandas 一
  • 题解 | #G.Gcd# 2023牛客暑期多校6
  • 苍穹外卖day10——订单状态定时处理(Spring Task)、来单提醒和客户催单(WebSocket)
  • 【多线程初阶】多线程案例之单例模式