正确做法是用 JavaScript 动态重写 tbody 内容，依据 data-priority 属性只保留高优先级列（如 1 级），同步更新 thead，并妥善处理表单控件和合并单元格。
Bootstrap 5 表格响应式隐藏列的正确做法
直接用 .d-none 或 .d-sm-table-cell 类在小屏下隐藏列，会导致表格结构错乱甚至内容错位——Bootstrap 的响应式表格不是靠“隐藏列”实现的，而是靠重构 DOM 结构。
用 data-bs-responsive-table 不行，得换思路
Bootstrap 5 官方移除了 table-responsive 对列级控制的支持，也不提供类似 data-hide-on="sm" 这样的内置属性。想让小屏只显示姓名、状态、操作三列，必须手动干预渲染逻辑。
- 不要依赖 CSS 隐藏
<td>：隐藏后<tr>仍按完整列数渲染，容易触发横向滚动或错列 - 避免用
display: none直接作用于<th>/<td>：影响语义、可访问性，且无法解决<colgroup>宽度继承问题 - 真正有效的办法是：小屏下用 JavaScript 重写
<tbody>内容，只保留目标列数据（如name、status、action）
用 data-* 属性标记目标列并动态渲染
给每列 <th> 加 data-priority 标记重要等级，再配合 JS 提取高优先级列数据生成精简版表格体：
<table class="table">
<thead>
<tr>
<th data-priority="1">姓名</th>
<th data-priority="2">邮箱</th>
<th data-priority="1">状态</th>
<th data-priority="3">创建时间</th>
<th data-priority="1">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>zhang@example.com</td>
<td>启用</td>
<td>2024-01-01</td>
<td><button class="btn btn-sm">编辑</button></td>
</tr>
</tbody>
</table>然后监听 window.matchMedia('(max-width: 768px)')，在小屏激活时遍历 <tbody> 每行，只取 data-priority="1" 的单元格内容，拼成新 <tr> 替换原内容。
移动端真机测试时容易漏掉的细节
即使逻辑写对，也常因以下原因导致小屏显示异常：
-
<th>和对应<td>的data-priority值不一致——务必保证列顺序与属性值严格对齐 - 没重置
<thead>：小屏下应同步替换<thead>，只保留 priority=1 的<th>，否则表头列数和内容列数不匹配 - 忽略表单控件：如果
<td>里有<input>或<select>，直接 innerText 提取会丢掉 value，需用el.value || el.textContent - 未处理 colspan/rowspan：含合并单元格的表格必须跳过或单独适配，否则新生成的行会错位
复杂表格建议用 DataTable 或 react-table 这类支持列配置的库替代原生方案，手写逻辑在多条件筛选+排序+分页场景下很快失控。
