当前位置：首页 > 文章列表 > 文章 > 前端 > CSS表格高亮方法全解析

CSS表格高亮方法全解析

2025-09-25 13:01:00 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《CSS表格高亮技巧详解》，涉及到，有需要的可以收藏一下

通过CSS的:hover伪类实现表格行高亮，首先构建基本表格结构，再添加tr:hover{background-color:#f0f8ff}样式，使鼠标悬停时行背景变色，还可结合nth-child(even)设置奇偶行不同底色，提升可读性。

如何用css实现简单表格高亮效果

实现表格行高亮效果，主要是通过 CSS 的伪类选择器和背景色变化来完成。当用户将鼠标悬停在某一行时，该行的背景色会改变，从而达到高亮效果。

1. 基本表格结构

先写一个简单的 HTML 表格：

姓名	年龄	城市
张三	25	北京
李四	30	上海
王五	28	广州

2. 添加悬停高亮样式

使用 :hover 选择器为表格行设置鼠标悬停效果：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f5f5f5;
}

tr:hover {
  background-color: #f0f8ff;
}

说明：
- border-collapse: collapse 让边框合并，看起来更整洁。
- tr:hover 是关键，它让鼠标移到哪一行，哪一行就变色。
- 背景色 #f0f8ff 是浅蓝色，也可以换成其他颜色如 #ffebee（浅红）或 #e8f5e8（浅绿）。