根本原因是父级样式截断了table-responsive的overflow-x: auto；需检查并移除父容器的overflow: hidden、display: flex等冲突样式，ios补-webkit-overflow-scrolling: touch。
表格内容横向溢出，table-responsive 不生效？
根本原因不是 Bootstrap 类写错了，而是 table-responsive 的滚动能力被父级样式截断了。它依赖 overflow-x: auto 生效，一旦上层容器设了 overflow: hidden、display: flex（且未设 flex-shrink: 0）或 max-width，滚动条就直接消失。
排查时打开 DevTools，逐层检查 table-responsive 的直接父元素——临时删掉它的 overflow 或 display 样式，看滚动是否恢复。iOS 上还要补一句：-webkit-overflow-scrolling: touch，否则拖拽卡顿、松手回弹。
td 里文字太长撑破列宽，怎么截断加省略号？
Bootstrap 默认给 td 设了 white-space: nowrap，这是为了对齐，但会让长文本单行硬撑。要加省略号，必须三件套同时上：
white-space: nowrapoverflow: hiddentext-overflow: ellipsis
而且得配一个明确的宽度约束，比如 max-width: 150px 或用 width + table-layout: fixed。只加 text-truncate 类不够，它不带宽度控制，父容器一宽松就失效。
小屏想隐藏非关键列，但表头和数据列错位？
错误做法是只给 td 加 d-none d-lg-table-cell，却忘了同步处理对应 th。Bootstrap 5 已废弃 visible-xs 等旧类，必须用 d-{breakpoint}-none 或 d-{breakpoint}-table-cell，且 th 和 td 的响应式类要完全一致。
更隐蔽的坑是：如果用了 table-layout: fixed（推荐用于响应式），又没给 <col> 或 th 设宽度，隐藏列后剩余列会异常拉伸。建议显式写 <col style="width: 120px"> 控制基础列宽。
需要小屏折叠详情，但 JS 注入的 collapse 内容错行？
折叠块必须塞进同一 tr 下方，并用 colspan 跨全宽，否则窄屏下会和上一行数据错开。常见错误是把 collapse 放在独立 tr 里，或者没设 colspan。
另外两个易漏点：aria-expanded 和 aria-controls 属性必须手动同步到按钮和折叠区，否则读屏器无法识别状态；data-detail 存的 JSON 字符串得用 JSON.parse() 安全解析，别直接 eval。
最麻烦的其实是 table-layout: fixed 和 width: 100% 的组合——它会让所有列等分，反而放大溢出风险。真要兼顾多端，得按场景拆：大屏靠列显隐，小屏靠折叠，中屏靠 table-responsive 滚动，别指望一个方案通吃。
