bootstrap 5 表格交互需css+js协同：hover在移动端无效，须用js监听click加active类；focus需绑定button/a等可聚焦元素；选中态必须js维护状态并配合css样式，且html结构（如tbody）和wcag对比度要求不可忽略。
Bootstrap 5 表格本身没有“交互”能力，所谓增强交互，本质是用 CSS 控制 hover、focus、选中态等视觉反馈，并配合 HTML 结构约束行为边界——不加 JS 就别指望点击排序或展开行。
table-hover 在移动端完全无效，别白费劲
Bootstrap 的 .table-hover 依赖 :hover 伪类，而 iOS 和 Android 浏览器在触摸设备上不触发 hover 状态（除非模拟，但不可靠）。用户轻点某行，不会变色，也不会保留高亮。
- 检查是否误以为“悬停 = 点击”，实际是两个完全不同的输入模型
- 如果真需要触屏下的行高亮，必须用 JS 监听
click或touchstart，动态加active类，再配 CSS：.table > tbody > tr.active { background-color: #e9ecef !important; } - 不要给
tr设cursor: pointer，它在手机上毫无意义，还可能干扰原生点击区域
让鼠标悬停反馈更明确：覆盖默认浅灰，加 border 或 shadow
默认 .table-hover 只改 background-color，在浅色背景或高对比度模式下几乎不可见。直接覆盖样式比写新类更省事。
- 在全局 CSS 里加：
.table-hover > tbody > tr:hover { background-color: #f8f9fa !important; border-left: 3px solid #0d6efd; } - 避免只改
background-color：深色主题下浅灰背景反而难识别，border 左侧条或 box-shadow 更稳定 - 别用
!important覆盖单个td，而是作用于tr，否则单元格边框会错位
聚焦状态（focus）必须绑定到可聚焦元素，不是 tr
表格行 tr 默认不可聚焦，:focus 无法生效。键盘用户按 Tab 键根本进不到表格行里。
- 若需键盘导航支持，得把
tabindex="0"加在tr上（不推荐），或更稳妥地——把操作按钮（如编辑、删除）放在td内，并确保它们有href="#"或button标签 - CSS 中写：
.table > tbody > tr > td > button:focus, .table > tbody > tr > td > a:focus { outline: 2px solid #0d6efd; outline-offset: 2px; } - 切勿对
tr设置outline：它不触发重绘，且和border-collapse冲突，视觉错乱
选中态（select）只能靠 JS 驱动，CSS 仅负责样式
HTML 表格没有原生多选机制，:checked 对 tr 无效。所谓“高亮已选行”，必须靠 JS 维护状态，CSS 只做视觉映射。
- 给被选中的
tr动态加selected类（例如：tr.classList.add('selected')） - CSS 定义：
.table > tbody > tr.selected { background-color: #d1ecf1 !important; color: #0c5460; } - 注意颜色对比度：WCAG 要求文本与背景对比度 ≥ 4.5:1，
#d1ecf1配黑字达标，但配灰字可能不达标 - 如果表格启用了
.table-striped，.selected必须用!important覆盖其奇偶行样式，否则会被干扰
真正容易被忽略的点是：所有这些“交互”样式都依赖正确的 HTML 结构——tbody 不能缺，tr 必须在 tbody 内，否则 .table-hover 和 .table-striped 都不生效；而任何想用键盘操作的场景，都绕不开 button 或 a 这类原生可聚焦元素。纯靠 CSS 想搞出带焦点管理、多选、悬停反馈的表格，是自欺欺人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
