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

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

代码:

xml 复制代码
<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>

渲染效果:

相关推荐
C_心欲无痕3 分钟前
vue3 - 依赖注入(provide/inject)组件跨层级通信的优雅方案
前端·javascript·vue.js
幺零九零零7 分钟前
全栈程序员-前端第二节- vite是什么?
前端
你脸上有BUG27 分钟前
TreeSelect 组件 showCheckedStrategy 属性不生效问题
前端·vue
小北方城市网40 分钟前
第 6 课:Vue 3 工程化与项目部署实战 —— 从本地开发到线上发布
大数据·运维·前端·ai
BD_Marathon1 小时前
Vue3_响应式数据的处理方式
前端·javascript·vue.js
90后的晨仔1 小时前
🛠️ 修复 macOS 预览乱码 PDF 的终极方案:用 Python 批量“图像化”拯救无法打开的 PDF
前端
嚣张丶小麦兜1 小时前
Vue常用工具库
前端·javascript·vue.js
曹牧2 小时前
C#:记录日志
服务器·前端·c#
小飞侠在吗2 小时前
Vue customRef
前端·javascript·vue.js
xhxxx2 小时前
别再让 AI 自由发挥了!用 LangChain + Zod 强制它输出合法 JSON
前端·langchain·llm