css制作表格高亮行效果-css教程-PHP中文网

css制作表格高亮行效果

P粉602998670

发布： 2025-10-28 18:39:01

原创

929人浏览过

使用tr:hover设置背景色可实现表格行高亮，配合transition添加过渡效果更平滑，如浅蓝或淡红色高亮，提升用户体验。

css制作表格高亮行效果

要实现表格行的高亮效果，可以使用CSS中的 :hover 伪类选择器，当鼠标悬停在表格的某一行时，改变该行的背景颜色，从而达到高亮的效果。

1. 基本HTML表格结构

先创建一个简单的表格：

<table><br>  <tr><br>    <td>张三</td><br>    <td>25</td><br>    <td>北京</td><br>  </tr><br>  <tr><br>    <td>李四</td><br>    <td>30</td><br>    <td>上海</td><br>  </tr><br>  <tr><br>    <td>王五</td><br>    <td>28</td><br>    <td>广州</td><br>  </tr><br></table>

登录后复制

2. 添加CSS高亮样式

使用 tr:hover 来设置鼠标悬停时的背景色：

table {<br>  width: 100%;<br>  border-collapse: collapse;<br>  font-family: Arial, sans-serif;<br>}<br><br>td {<br>  padding: 10px;<br>  border: 1px solid #ddd;<br>}<br><br>tr:hover {<br>  background-color: #f0f8ff; /* 浅蓝色高亮 */<br>}

登录后复制

3. 可选：添加过渡动画更平滑

让高亮出现得更自然，可以加上过渡效果：

tr {<br>  transition: background-color 0.3s ease;<br>}

登录后复制

立即学习“前端免费学习笔记（深入）”；

松果AI写作

专业全能的高效AI写作工具

查看详情

4. 完整示例

将HTML和CSS结合：

<style>
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

td {
  padding: 10px;
  border: 1px solid #ddd;
}

tr:hover {
  background-color: #ffeaea; /* 淡红色高亮 */
}

tr {<br>  transition: background-color 0.3s ease;<br>}
</style>

<table><br>  <tr><br>    <td>张三</td><br>    <td>25</td><br>    <td>北京</td><br>  </tr><br>  <tr><br>    <td>李四</td><br>    <td>30</td><br>    <td>上海</td><br>  </tr><br>  <tr><br>    <td>王五</td><br>    <td>28</td><br>    <td>广州</td><br>  </tr><br></table>