Bootstrap 5 中直接给 <tr> 添加 table-active 类即可高亮整行，自动适配背景、边框与文字反色；该类会覆盖条纹效果，动态使用时需先清除已有 table-active 再添加目标行。
直接给 tr 加 class="table-active" 最快
Bootstrap 5 默认提供语义化行级背景类，不需要写额外 CSS。只要在 <tr> 标签上加上 table-active，就能高亮整行（含边框、文字颜色适配）。
-
table-active：浅蓝灰背景，文字自动反色，适用于临时选中或强调 -
table-success/table-warning/table-danger：带语义的颜色，适合状态标识 - 别用
bg-*类（比如bg-primary），它会覆盖 Bootstrap 表格的 padding 和 border 样式，导致对齐错乱 - 如果用了
table-striped，table-active会自动覆盖条纹效果，无需额外处理
动态高亮某行？用 JavaScript 操作 classList
常见场景是点击行后高亮、或根据数据状态自动标记。关键不是加样式，而是「正确切换」——避免多行同时高亮或残留旧状态。
- 先清除已有
table-active：用document.querySelectorAll('tbody tr.table-active').forEach(tr => tr.classList.remove('table-active')) - 再给目标行添加：
targetTr.classList.add('table-active') - 注意作用范围：只操作
tbody tr，避免误触thead或tfoot中的行 - 如果表格启用了
data-bs-toggle="table"或第三方插件（如 DataTables），得确认它们是否劫持了 click 事件，可能需要event.stopPropagation()
自定义背景色时，为什么 !important 不是好主意？
强行用 style="background-color: #ffeb3b !important" 看似简单，但会破坏 Bootstrap 的响应式适配和深色模式支持。
- 正确做法是写一个轻量级 class，比如
.highlight-row，并在 CSS 中用tr.highlight-row > td, tr.highlight-row > th精确作用到单元格 - 必须重置
border-color和color，否则文字可能看不清（尤其深色背景配黑字） - 如果项目用了 Bootstrap 的 Sass，直接在变量层覆盖
$table-active-bg更稳妥，一劳永逸 - 移动端小屏下，
table-responsive容器里的自定义背景可能被横向滚动遮挡，要加overflow-x: visible测试
用 tbody + :nth-child() 静态高亮第 N 行？小心索引偏移
想固定高亮第二行？别直接写 tbody tr:nth-child(2)，因为表头 thead 不参与 nth-child 计数，但如果有 colgroup 或隐藏行，序号就容易错。
- 更可靠的是用
tbody tr:nth-of-type(2)，它只算tr元素，不受其他标签干扰 - 如果表格有服务端分页，前端 JS 渲染前 DOM 里可能没有
tbody，CSS 规则会失效 - IE11 不支持
:nth-of-type，若需兼容，老老实实用 JS 或服务端模板加 class - 不要在
thead tr上用这类选择器——Bootstrap 默认给表头设了background-color，叠加后颜色可能发灰
实际开发中，90% 的高亮需求用 table-active 就够了；剩下 10% 的复杂交互，核心不是“怎么加背景”，而是“什么时候加、加完怎么清、加了会不会影响其他样式”。尤其要注意表格嵌套、动态渲染和深色模式这三处，最容易漏测。
