要实现“大屏全列、小屏只留摘要列”，需为摘要信息单独设一列或一行（如d-md-none摘要行），配合d-{breakpoint}-none/d-{breakpoint}-table-cell控制显隐，td/th须单独加响应式类，避免依赖table-responsive滚动。
用 table-responsive 包裹但不够？小屏要彻底换结构
Bootstrap 默认的 table-responsive 只是加横向滚动，小屏仍显示全部列——这不是“摘要”，只是被迫拖拽。真要小屏只留关键字段（比如只显示姓名+状态，隐藏创建时间、操作按钮等），得主动控制列显隐，不能靠响应式容器硬撑。
核心思路：用 sr-only 类隐藏非关键列，再配合 visible-* / d-none d-md-table-cell 等断点类做条件显示。Bootstrap 5 起推荐用 d-{breakpoint}-none 和 d-{breakpoint}-table-cell 控制单元格级可见性。
-
td和th都要单独加响应式类，tr或table上加无效 - 别用
hidden-sm这类旧类名（Bootstrap 4 已弃用），新版统一用d-none d-md-table-cell - 摘要列建议放在最左，避免小屏时关键信息被截断
怎么写一行里“大屏全列、小屏只留摘要列”的 HTML 结构
不能指望一列多用，得为摘要信息单独准备一列（比如用 data-summary 属性或注释说明），再用 CSS 控制它在大屏隐藏、小屏显示。常见做法是加一个“摘要行” tr，仅在小屏生效：
| 姓名 | 部门 | 状态 | 创建时间 | 操作 |
|---|---|---|---|---|
| 张三 | 前端组 | 在职 | 2023-05-12 | 编辑 |
| 张三 · 在职 · 前端组 | ||||
注意：d-md-none 表示“中屏及以上隐藏”，这样小屏（xs/sm）才显示摘要行；colspan="5" 确保占满整行；bg-light 是可选视觉区分。
为什么不能只靠 display: none 写媒体查询？
手动写 @media (max-width: 768px) { .full-col { display: none; } } 看似简单，但容易漏掉几个关键点：
- 表头
th也要同步隐藏，否则小屏表头错位 - 没考虑打印样式——
display: none会让该列内容彻底不进打印输出，而sr-only或visually-hidden更稳妥 - Bootstrap 的断点类已内置了
prefers-reduced-motion和print媒体适配，自己写容易覆盖不全 - 若用 JS 动态增删列，CSS 类比内联
style更易维护
移动端点击“展开详情”怎么和表格联动？
纯 CSS 做不了交互式展开，得结合 JS。常见模式是小屏下每行末尾加一个 <button class="btn btn-sm btn-outline-primary d-md-none">详情</button>，点击后用 insertAdjacentElement 插入一个 tr 显示隐藏字段，且该 tr 加 d-md-none 确保大屏不干扰布局：
<tr>
<td>李四</td>
<td>后端组</td>
<td>休假</td>
<td>2023-02-18</td>
<td>
<a href="#">编辑</a>
<button class="btn btn-sm btn-outline-primary d-md-none ms-1" data-toggle="detail">详情</button>
</td>
</tr><tr class="d-md-none detail-row">
<td colspan="5">审批人：王五｜备注：产假中</td>
</tr>
JS 只需切换 detail-row 的 d-none 类即可。注意：不要用 collapse 组件套表格行——它依赖固定高度，表格 tr 的渲染机制会导致动画错乱。
复杂点在于摘要信息常需聚合多个字段（比如把“创建时间+更新时间+操作人”压缩成一行），这得在 JS 或模板层预处理，不能指望 CSS 自动拼接。
