HTML表格怎样让表格边框在鼠标划过时变色（代码解析）

表格 hover 变色不生效是因 border-collapse: collapse 导致边框合并，直接改 border 无效；推荐用 box-shadow 模拟外边框并加 transition 实现平滑变色，兼顾兼容性与动画效果。

表格边框 hover 变色为什么直接写 border 不生效

因为 HTML 表格默认启用 border-collapse: collapse（即使没显式声明），此时单元格边框会合并成一条线，:hover 作用在 <table> 或 <td> 上时，修改 border 只会改变「自身边框」，而合并后的外边框实际由最外层单元格的边框共同构成，视觉上不连贯、易断开。

真正起作用的是给整个表格加一个「包裹性外边框」，再控制它的颜色变化：

• 用 outline：简单但不支持圆角、无法精准控制粗细和位置
• 用 box-shadow 模拟边框：推荐，灵活、可动画、不影响布局
• 改用 border-collapse: separate + border-spacing: 0：能恢复独立边框逻辑，但需重置所有单元格边框，兼容性略差

用 box-shadow 实现平滑外边框变色（推荐）

这是最稳妥的做法，不干扰表格结构，支持过渡动画，且对 colspan/rowspan 完全友好：

table {  border-collapse: collapse;  transition: box-shadow 0.2s ease;}table:hover {  box-shadow: 0 0 0 2px #4a90e2;}

说明：

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

• 0 0 0 2px 中最后一个值是「扩展半径」，等效于外描边宽度
• 如果已有其他 box-shadow，记得保留原有部分，用逗号拼接
• 要兼容旧版 Safari，可加 -webkit-box-shadow
• 避免用 outline，它绕过 box model，焦点样式冲突时容易错位

想让单个单元格 hover 时显示局部边框怎么办

这时不能依赖表格合并逻辑，得让每个 <td> / <th> 自带独立边框：

table {  border-collapse: separate;  border-spacing: 0;}td, th {  border: 1px solid #ddd;  transition: border-color 0.15s;}td:hover, th:hover {  border-color: #4a90e2;}

注意点：

• border-spacing: 0 必须设，否则单元格之间会有白缝
• hover 时只变当前单元格边框，相邻单元格不变——这和「表格整体边框变色」是不同需求，别混用
• IE8 及更早版本不支持 border-collapse: separate 下的 border-spacing 动画，如需兼容请放弃过渡效果

移动端 touch 设备上 hover 失效怎么办

iPhone 和 Android 浏览器默认不触发 :hover（除非用户点击后短暂激活），纯 CSS 方案不可靠。真实场景中应补充 JS 逻辑：

document.querySelectorAll('table').forEach(table => {  table.addEventListener('touchstart', () => {    table.classList.add('hover-active');  });  table.addEventListener('touchend', () => {    setTimeout(() => table.classList.remove('hover-active'), 300);  });});

对应 CSS：

table.hover-active {  box-shadow: 0 0 0 2px #4a90e2;}

关键细节：

• 不用 ontouchstart 直接写内联，避免污染 HTML
• 加 setTimeout 是为了留出视觉反馈时间，不然 touchend 立即移除会闪一下
• 这个 class 名不要和已有的框架类名冲突（比如 Bootstrap 的 hover）

表格边框 hover 变色看着简单，但真正在意细节的人会卡在合并边框逻辑、移动端适配、以及过渡是否自然这三个地方。动手前先想清楚：你要变的是「整个表的轮廓」，还是「某个格子的四边」，选错方案后面全是补丁。