要真正隐藏表格列而非仅横向滚动，必须同步为每列的<th>和所有<td>添加Bootstrap响应式类（如d-none d-md-table-cell），确保表头与数据对齐；移动端展开需JS配合自定义类控制，避免破坏语义与可访问性。
小屏下用 table-responsive 不够，需要真正隐藏列
Bootstrap 默认的 table-responsive 只是让表格横向滚动，并不隐藏列。真要“只显示三列”，得靠响应式工具类手动控制每列的显隐——但注意：不能只对 <td> 加 d-none d-md-table-cell，因为表头 <th> 和数据行结构必须对齐，否则会错位甚至破坏语义。
- 必须同时控制
<th>和对应位置的<td>（或<th>在 tbody 中），否则表头与数据列错位 - 推荐在
<thead>和<tbody>中为每一列统一加类，比如第 1、3、5 列保留，其余加d-none d-md-table-cell - Bootstrap 5 的
d-{breakpoint}-none类在小屏（xs）生效，d-md-table-cell在中屏及以上恢复显示；别用d-sm-none，因为sm是最小断点，小屏下反而全没了
用 colgroup + 媒体查询更稳妥？不推荐
有人试过用 <colgroup> 配合 CSS display: none 隐藏列，但实际效果不可靠：<col> 不影响单元格内容渲染，且 display: none 在 <col> 上多数浏览器不生效；媒体查询写起来也容易漏掉 <th> 或某一行的 <td>，维护成本高。
直接用 Bootstrap 内置响应式类最省心，只要确保每列的 <th> 和所有 <td> 同步加类即可：
<table class="table">
<thead>
<tr>
<th class="d-none d-md-table-cell">ID</th>
<th>姓名</th>
<th class="d-none d-md-table-cell">邮箱</th>
<th>部门</th>
<th class="d-none d-md-table-cell">入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none d-md-table-cell">1001</td>
<td>张三</td>
<td class="d-none d-md-table-cell">zhang@example.com</td>
<td>前端</td>
<td class="d-none d-md-table-cell">2023-01-15</td>
<td><button class="btn btn-sm">编辑</button></td>
</tr>
</tbody>
</table>移动端点击展开隐藏列？需额外 JS
纯 CSS 无法实现“点击显示隐藏列”，如果需求是“默认只显示三列，点图标展开全部”，就得加 JS 控制类切换。这时候要注意：别直接 toggle d-none，因为会影响所有断点；应该切到一个自定义类如 expand-col，配合 CSS 规则覆盖默认隐藏逻辑。
- 例如定义
.expand-col .d-none.d-md-table-cell { display: table-cell !important; } - 再用
document.querySelector('table').classList.toggle('expand-col')控制 - 避免用
!important的话，就得提高选择器权重，比如.expand-col > thead > tr > th:nth-child(2)
用 data-* 属性+JS 生成响应式表格？太重
有方案建议把完整数据存在 data-row 里，小屏时用 JS 渲染精简版 DOM。这适合数据量大、列数极多的场景，但对普通业务表属于过度设计：增加首屏 JS 体积、破坏 SSR 友好性、键盘导航和屏幕阅读器支持变差。
除非你表格有 15+ 列且小屏下必须严格控制宽度，否则坚持用原生 HTML + Bootstrap 响应式类是最稳的选择——改错一列的类名，整行就乱，这点最容易被忽略。
