Bootstrap 表格需通过自定义语义化 class（如 col-actions）配合 d-{breakpoint}-table-cell 响应式工具类实现列级显隐，th 与 td 必须同步加相同类；小屏拥挤时可用 details 折叠非核心字段，同时注意打印导出、JS 渲染及 table-layout 兼容性问题。
Bootstrap 表格如何响应式隐藏非关键列
直接用 table-responsive 只是加横向滚动，不是“小屏显示核心信息”，真正要的是按屏幕尺寸动态显隐列。Bootstrap 本身不提供列级响应式开关，得靠自定义 class + 媒体查询或 JS 控制。
核心思路：给每列加语义化 class（如 col-id、col-name、col-actions），再配合 Bootstrap 的断点类（d-none d-md-table-cell）控制显隐。
-
d-none d-md-table-cell：小屏隐藏，中屏及以上显示该列 -
d-none d-lg-table-cell：小/中屏隐藏，大屏显示 - 避免用
hidden-xs等旧版类名，Bootstrap 4/5 已废弃 - 表头
<th>和数据行<td>必须用相同 class 才能对齐
如何用 Bootstrap 5 的 display 工具类控制列显隐
Bootstrap 5 提供了完整的响应式 display 工具类，但注意：table-cell 是特殊值，必须用 d-{breakpoint}-table-cell，不能只写 d-md-none——那样会破坏表格结构（变成 display: none，整行错位）。
示例：只在 ≥lg 屏幕显示“操作”列
<thead>
<tr>
<th class="d-none d-lg-table-cell">ID</th>
<th>姓名</th>
<th>邮箱</th>
<th class="d-none d-lg-table-cell">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none d-lg-table-cell">1</td>
<td>张三</td>
<td>zhang@example.com</td>
<td class="d-none d-lg-table-cell"><button class="btn btn-sm">编辑</button></td>
</tr>
</tbody>
- 所有需要响应式控制的列，
<th>和对应<td>必须同时加相同 class - 不要对
<tr>或<table>加 display 类，会破坏表格渲染流 - 如果用了
table-striped，隐藏列后条纹仍按完整行计算，视觉上没问题
小屏下用折叠卡片替代整列（适合复杂操作或长文本）
纯显隐列在小屏可能仍显拥挤，尤其含按钮、状态标签时。更稳妥的做法是：小屏把非核心字段收进 details 或折叠卡片，用 data-bs-toggle="collapse" 触发。
示例：小屏把“邮箱+操作”合并到一个可展开区域
<td>
<div class="d-block d-md-none">
<details>
<summary>详情</summary>
<p class="mb-1"><strong>邮箱：</strong>zhang@example.com</p>
<div><button class="btn btn-sm btn-outline-primary">编辑</button></div>
</details>
</div>
<div class="d-none d-md-table-cell">zhang@example.com</div>
</td>
-
d-block d-md-none和d-none d-md-table-cell配合，实现内容形态切换 - 避免在折叠区放太多交互元素，小屏触控精度低，按钮间距至少 44px
- 不要依赖
details的默认样式，它在 Safari 旧版本里不支持 summary 样式重置
容易被忽略的兼容性与性能细节
响应式表格最常踩的坑不是写法，而是没考虑真实使用场景：
- 导出 Excel 或打印时，
d-none类会让隐藏列彻底丢失——需额外加print-onlyclass 或服务端处理 - 如果表格由 JS 动态渲染（如 DataTables），class 要在数据绑定前就写死，否则 Vue/React 的条件渲染可能绕过 CSS 规则
- 用
d-{bp}-table-cell时，若列宽差异极大（如一列 200px，另一列 50px），小屏即使隐藏了宽列，剩余列也可能因table-layout: auto挤成一团；建议加table-layout: fixed并设th:first-child { width: 20% }等约束
真正的难点不在怎么写 class，而在于确定哪些字段算“核心”——这得和业务方对齐，而不是前端凭感觉删列。
