Bootstrap 表格列响应式需手动控制每列显隐，用 d-{breakpoint}-none 或 d-{breakpoint}-table-cell 类作用于 td/th 并保持一致；须设 table-layout: fixed 配合 width 和 text-truncate；折叠详情需 JS 动态提取数据并正确嵌入 tr 内，注意事件兼容与无障碍支持。
用 Bootstrap 的响应式类控制表格列显隐
直接靠 table 自身无法实现“大屏显示全部列、小屏只留关键列”，必须手动控制每列的显示/隐藏。Bootstrap 本身不提供表格列级响应式开关，得靠 visible-* / d-none d-md-table-cell 这类工具类组合实现——但要注意：这些类作用在 td 和 th 上时，需确保整行结构不被破坏（比如不能只隐藏部分 td 而不处理对应 th）。
常见错误是给 td 加 d-none d-lg-table-cell，却忘了同步处理 th，导致小屏表头错位或空白列残留；另一个坑是用了过时的 visible-xs 等 v3 类名，在 Bootstrap 5 中已完全移除，必须用 d-{breakpoint}-none 或 d-{breakpoint}-table-cell。
- 核心思路：为每列分别设置显隐规则，例如“操作”列只在
lg及以上显示：class="d-none d-lg-table-cell" - 表头
th必须与对应数据列td使用完全一致的响应式类 - 避免对
tr或table应用显示类，否则可能破坏表格渲染逻辑 - 如果某列在小屏需折叠进下拉菜单或详情块，不能仅靠 CSS 隐藏，得配合 JS 动态生成（见下节）
小屏把非核心列收进「展开详情」按钮
纯 CSS 隐藏列适合简单场景，但若小屏需要保留所有字段（只是换种方式展示），就得用 JavaScript 把冗余列抽出来塞进折叠区域。Bootstrap 5 自带的 collapse 组件能直接复用，关键是把原表格行的额外 td 内容提取后注入到折叠区，而不是重复写 HTML。
容易忽略的是：折叠内容区域必须放在同一 tr 内，且用 colspan 跨全宽，否则在窄屏下会错行。另外，aria-expanded 和 aria-controls 属性要手动同步，否则无障碍访问会出问题。
- 给每行加一个
data-detail属性，存 JSON 字符串（如{"status":"已发货","time":"2024-06-10"}） - 渲染时用 JS 解析该属性，动态生成折叠区的
div class="collapse"，并插入到当前tr下方 - 折叠触发按钮放在首列，用
data-bs-toggle="collapse"指向对应id - 务必在
td中用d-none d-md-table-cell隐藏原字段，避免小屏重复显示
注意 table-layout: fixed 对响应式的影响
Bootstrap 默认表格用 table-layout: auto，这会让小屏下文字撑宽单元格、破坏布局。一旦你用了列显隐或折叠详情，必须手动加 table-layout: fixed，否则隐藏列后剩余列宽度会异常拉伸或挤压。
加了 fixed 后，width 设置才真正生效，但副作用是：内容超长时默认不换行。所以得配套加 text-truncate 或自定义 word-break: break-word。
- 给
table加class="table table-fixed"，再在 CSS 中定义.table-fixed { table-layout: fixed; } - 核心列（如 ID、名称）设固定宽度，比如
width: 120px；可变列（如描述）用width: auto或min-width - 所有含文本的
td建议加text-truncate，防止长文本撑破容器 - 如果用了折叠详情，其容器
div需设overflow-x: auto，允许横向滚动查看完整字段值
移动端点击整行触发详情的兼容写法
单纯靠按钮展开详情不够直观，用户习惯点行看详情。但直接给 tr 绑 click 在桌面端会和 checkbox、链接冲突；在 iOS Safari 上还可能触发双击放大。稳妥做法是监听 tr 的 touchstart + click，并排除目标是可交互元素的情况。
别用 tr:hover 做视觉反馈——移动端没 hover；也别依赖 pointer-events: none 简单禁用，它会阻止所有事件冒泡，导致内部按钮失效。
- 给
tr加data-bs-toggle="collapse"和data-bs-target，指向本行的详情区id - 用
event.target.matches('td:not(.no-click), th:not(.no-click)')判断是否点击在非控件区域 - 在详情区顶部加「返回」按钮，并聚焦回原行，方便键盘导航用户
- 如果表格有排序或分页，确保折叠状态不随重绘丢失（需用
data-state="expanded"缓存）
modal 或 tab-pane 里时，collapse 初始化时机容易错，得监听 shown.bs.tab 或 shown.bs.modal 后再 init。 
