必须用 包裹整张表，因其通过 overflow-x: auto 和 display: block 实现横向滚动，仅作用于父容器，不修改表格自身样式。
直接加 .table-responsive 就行，但必须套在 <table> 外层 <code><div> 上，不是加在 <code><table> 标签里，也不是只包 <code><tbody>。
<h3>为什么必须用 <code><div class="table-responsive"> 包裹整张表
<p><code>.table-responsive 的作用机制是给容器设 overflow-x: auto 和 display: block，让超出宽度的内容可横向滚动。它不修改 <table> 自身样式，只靠父容器兜底。
<ul><li>写成 <code><table class="table table-responsive"> —— 完全无效，<code>overflow-x 不会生效
<tbody> 或某几列 —— 滚动区域错位，表头可能固定不动，内容对不上
<li>嵌在 <code><div class="card"> 里却没把 <code>.table-responsive 放最内层 —— 外层 overflow: hidden 会直接截掉滚动条
.table-responsive 在移动端的实际表现和坑
它本质是“横向滚动”，不是“自动重排”。iOS Safari 对 overflow-x: auto 的惯性滚动支持弱，用户常误以为卡住，得用力拖一下才动；Android 一般没问题。
- 别指望它解决所有小屏体验问题：列太多时，用户得反复左右滑，找不到关键字段
- 如果表格里有按钮、下拉框等交互元素，小屏下热区太小，容易点错 —— 建议改用
d-none d-md-table-cell隐藏非核心列 - 某些 UI 库（比如 Tailwind 的 reset）或自定义 CSS 可能覆盖
div.table-responsive的overflow-x，用 DevTools 看 computed 值确认是否为auto
比单纯滚动更实用的响应式策略
真要兼顾可用性，光靠 .table-responsive 远不够。尤其当列数 ≥6 或含操作列时，优先考虑语义化降级。
- 关键字段优先：给非必要列的
<th> 和对应所有 <code><td> 加 <code>d-none d-md-table-cell，在md（768px）及以上才显示 - 避免只加
d-sm-none：sm断点仅 576px，很多平板仍属此范围，会过早隐藏 - 内容极多又必须全显？放弃
<table>，改用 <code><div class="list-group"> + <code>col-12堆叠每行，用row模拟列结构，可读性反而更好 - 带合并单元格（
rowspan/colspan）时，控制跨度 ≤2，否则小屏滚动后逻辑关系断裂，建议补aria-label说明
最容易被忽略的是：.table-responsive 解决的是“不崩 layout”，不是“好用”。要不要滚动、滚多少、哪些该藏、哪些该重构，得看数据本身是否适合表格语义 —— 后台日志、定价页、权限列表，各自的最佳实践完全不同。
