Bootstrap 4/5 支持 table-hover，但需同时具备 table 和 table-hover 类；自定义样式须复刻其高权重选择器（含 tbody）；table-dark 下 hover 颜色需手动优化对比度；动态渲染时 class 必须在 table 标签且 tr 在 tbody 内。
Bootstrap 4/5 默认不支持 table-hover 行悬停？
不是不支持，是必须同时满足两个条件：表格要有 table 类，且必须加 table-hover 类。缺一个都不生效。很多人只加了 table-hover 却忘了 table，结果 hover 没反应，以为是 css 被覆盖或版本问题。
常见错误现象：tr 背景完全不变色，开发者工具里看 :hover 样式根本没触发；或者只在 th 上生效、td 不响应——那大概率是漏了 table 基础类。
-
<table class="table table-hover">✅ 正确写法 -
<table class="table-hover">❌ 缺table，失效 -
<div class="table table-hover">❌ 非table元素，CSS 选择器不匹配
自定义 hover 背景色时，为什么 !important 总是被绕过？
因为 Bootstrap 的 .table-hover > tbody > tr:hover 选择器权重高（含 3 个标签+1个类），直接写 tr:hover { background: #f0f0f0 !important } 会被忽略——!important 只作用于声明本身，但选择器没命中，样式压根不进层叠队列。
正确做法是复刻 Bootstrap 的选择器结构，再覆盖：
.table-hover > tbody > tr:hover {
background-color: #f8f9fa !important;
}
注意：tbody 不能省。即使 HTML 里没写 tbody，浏览器会自动补全，但 CSS 选择器必须显式写出，否则不匹配。
使用 table-dark 时 hover 颜色发灰看不清？
Bootstrap 的 table-dark 把 hover 背景色设为 #212529（接近纯黑），和文字色 #fff 对比度低，尤其在 OLED 屏上容易“糊成一片”。这不是 bug，是设计取舍——但实际项目里常需调整。
- 改文字色：
.table-dark .table-hover > tbody > tr:hover td, .table-dark .table-hover > tbody > tr:hover th { color: #e9ecef; } - 调背景色：
.table-dark .table-hover > tbody > tr:hover { background-color: #343a40; } - 别用
!important直接怼全局，否则影响其他 dark 表格变体
Vue/React 中动态渲染 tr 后 hover 失效？
不是框架问题，是 DOM 结构变化后，如果新 tr 所在的 table 元素没重绘或没正确继承 class，CSS 就不会重新绑定。典型场景：用 v-for 或 map() 渲染 tr，但把 table-hover 错放在 tbody 上。
必须确保 table-hover 在 <table> 标签上，且所有 tr 都在 tbody 内（不要分散在多个 tbody 或混在 thead 里）：
<table class="table table-hover">
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
如果用了 render 函数或 JSX 动态生成，检查最终输出的 HTML 是否保留了 table 和 table-hover 类，以及 tr 是否真的在 tbody 下——这是最常被忽略的结构细节。
