1. 为什么 CSS :hover 在表格中只高亮单元格？
1.1 现象描述
在表格中直接给 td 应用 :hover 时，常见的现象是只有当前悬停的单元格会改变背景颜色，这源自 CSS 的工作机制：伪类 :hover 作用在其所在的元素上，因此 td:hover 的样式仅对该单元格生效。
如果你期望鼠标移到某一行时整行一起高亮，这种“单元格级别”的高亮就无法自动实现，需要把悬停的触发点改为行级或表级的父元素。
1.2 机制分析
浏览器在渲染表格时，每个单元格都属于独立的盒模型，td、th 等都具备自己的背景属性。因此 td:hover 只改变当前单元格的背景，并不会自动扩展到同一行的其他单元格。
若你希望整行高亮，必须利用父元素的 :hover 触发机制，例如将样式写在 tr:hover 上，从而让该行内的所有单元格都受影响。
/* 只对悬停的单元格生效（示例） */
td:hover { background: #ffd54f; }以上示例的结果是“局部高亮”，即仅高亮当前鼠标所在的单元格，无法实现整行或整表高亮。
1.3 关键要点
要点总结：若要实现整行或整张表的高亮，必须将 :hover 的作用域扩展到行级或表级父元素，并在子元素上统一应用背景颜色。
接下来，我们通过具体做法来实现不同范围的高亮效果，帮助你在实际开发中快速落地。
2. 如何正确实现整张表高亮的实用方法
2.1 实现整行高亮的最常用做法
要实现“整行高亮”的效果，最常用的做法是对行元素（<tr>）设置 :hover，并把样式应用到该行的所有单元格上：
核心思路：把悬停状态放在 tr，再让 td 继承或被覆盖为高亮颜色。
/* 整行高亮（悬停在任意行时，整行高亮） */
tbody tr:hover td {background-color: #ffd54f;
}
如果你还希望悬停在表头行时也能高亮头部单元格，可以结合 thead 的规则来实现：
/* 头部行在悬停时高亮头部单元格（可选） */
thead tr:hover th {background-color: #ffe082;
}
2.2 实现整张表高亮的实用做法
若你的需求是“整张表在鼠标悬停时全部高亮”，可以使用 table:hover 来触发对所有单元格的样式应用，这样无论鼠标位于表格的哪一行，整张表都会高亮：
/* 整张表在鼠标悬停时高亮所有单元格（包括表头） */
table:hover td, table:hover th {background-color: #ffd54f;
}
应用场景：在数据板、汇总表或可交互的控件面板中，提升用户在浏览整张表时的聚焦感。
为了方便主题切换和统一风格，可以用 CSS 变量统一管理高亮颜色，例如：
:root {--hover-color: #ffd54f;
}
table:hover td, table:hover th {background-color: var(--hover-color);
}
2.3 注意点与兼容性考量
在实际布局中，边框、背景叠层、以及 colspan/rowspan 等情况会影响高亮效果的呈现。若遇到背景叠加问题，可以尝试显式设置 background-clip、border-collapse 的取值，以及确保在极端情况下颜色对比度仍然清晰。
对于仅在特定浏览器需要兼容的情形，建议先在主流浏览器上做对比测试，确认 tr:hover td 的覆盖范围符合你的期望，再决定是否引入 table:hover 的方案。
综合来看，解决“为什么 CSS :hover 在表格中只高亮单元格？”的根本在于明确悬停的作用域，并采用 tr:hover 或 table:hover 的策略来实现你想要的高亮范围。
