如何设置HTML表格的边框颜色变化？HOVER状态下线条变色-html教程-PHP中文网

必须先给td/th设初始透明边框，否则hover时因border-style默认为none而出现闪动或无效；正确写法是table tr td,table tr th{border:1px solid transparent;transition:border-color .2s ease}，tr:hover时仅改border-color。

如何设置html表格的边框颜色变化？hover状态下线条变色

直接用 :hover 改 border-color 就行，但必须先设初始边框，否则悬停时会“闪一下”或根本没反应。

为什么表格行 hover 时边框不变色？

常见错误是只写 tr:hover { border-bottom: 1px solid red; }，却没给 tr 或它的子元素（如 td）预先定义 border 样式。浏览器默认 border-style 是 none，宽度为 0，所以首次 hover 会从无到有“跳变”，视觉上像没生效。

表格边框由 td 或 th 承载，tr 本身不渲染边框（除非用 border-collapse: separate + border）
如果用了 border-collapse: collapse（默认），相邻单元格共用边框，改单个 td 的 border-color 可能被覆盖或不均匀
DataTables 等库会动态加 class（如 .odd/.even），CSS 选择器必须匹配这些 class 才能生效

正确写法：给 `td` 设透明初始边框

这是最稳定、兼容性最好的方式，适用于所有现代浏览器（包括 IE9+）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

先统一给 td 和 th 设初始边框：border: 1px solid transparent
在 tr:hover td 中只改 border-color，避免重绘布局
加 transition: border-color 0.2s ease 让变色平滑（别写 transition: all）
若只要顶部/底部边框变色，就只设 border-top 和 border-bottom，其他方向保持 transparent

table tr td,
table tr th {
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
table tr:hover td,
table tr:hover th {
  border-color: #4a90e2;
}

特殊场景：只让上下边框变色

比如设计中只要 hover 行时显示“下划线+顶线”，其他边框不动，就得精确控制方向。

初始写 border-top: 1px solid transparent; border-bottom: 1px solid transparent;，左右边框可省略或设为 0
hover 时只更新这两个方向：border-top-color: #d32f2f; border-bottom-color: #d32f2f;
注意 border-collapse: collapse 下，相邻行的 bottom 和 top 会合并，所以实际看到的是单条线 —— 这反而是优势，不会出现双线重叠
如果表格用了 border-collapse: separate，需额外处理 border-spacing，否则 gap 里会漏出背景色