要真正隐藏表格列而非仅横向滚动，必须同步为每列的和所有添加bootstrap响应式类（如d-none d-md-table-cell），确保表头与数据对齐；移动端展开需js配合自定义类控制，避免破坏语义与可访问性。
小屏下用 table-responsive 不够，需要真正隐藏列
Bootstrap 默认的 table-responsive 只是让表格横向滚动，并不隐藏列。真要“只显示三列”，得靠响应式工具类手动控制每列的显隐——但注意：不能只对 <td> 加 <code>d-none d-md-table-cell，因为表头 <th> 和数据行结构必须对齐，否则会错位甚至破坏语义。<ul><li>必须同时控制 <code><th> 和对应位置的 <code><td>（或 <code><th> 在 tbody 中），否则表头与数据列错位<li>推荐在 <code><thead> 和 <code><tbody> 中为每一列统一加类，比如第 1、3、5 列保留，其余加 <code>d-none d-md-table-cell
d-{breakpoint}-none 类在小屏（xs）生效，d-md-table-cell 在中屏及以上恢复显示；别用 d-sm-none，因为 sm 是最小断点，小屏下反而全没了用 colgroup + 媒体查询更稳妥？不推荐
有人试过用 <colgroup></colgroup> 配合 CSS display: none 隐藏列，但实际效果不可靠：<col> 不影响单元格内容渲染，且 display: none 在 <col> 上多数浏览器不生效；媒体查询写起来也容易漏掉 <th> 或某一行的 <code><td>，维护成本高。<p>直接用 Bootstrap 内置响应式类最省心，只要确保每列的 <code><th> 和所有 <code><td> 同步加类即可：<pre class="brush:php;toolbar:false;"></pre>
<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>
<h3>移动端点击展开隐藏列？需额外 JS</h3>
<p>纯 CSS 无法实现“点击显示隐藏列”，如果需求是“默认只显示三列，点图标展开全部”，就得加 JS 控制类切换。这时候要注意：别直接 toggle <code>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 响应式类是最稳的选择——改错一列的类名，整行就乱，这点最容易被忽略。
