应使用css媒体查询配合:nth-child()或data-priority属性控制列显隐，外层容器设overflow-x:auto并加-webkit-overflow-scrolling:touch优化滚动，前三列设min-width和white-space:nowrap防变形错位。

小屏幕下隐藏非关键列的通用思路

bootstrap 默认的 table-responsive 只是加横向滚动，不解决“只显示前三列”这个需求。真要实现列级控制，必须放弃响应式容器，改用 css 媒体查询 + 列选择器手动控制 display，否则没法精准裁剪列数。

用 :nth-child() 配合媒体查询隐藏多余列

这是最直接、兼容性好（IE9+）、无需 JS 的方案。关键点在于：不能对 <td> 单独设 <code>display: none（会破坏表格结构），而要作用于 <th> 和对应位置的 <code><td>。<ul><li>在 <code>@media (max-width: 768px) 下，给第 4 列及之后的 <th> 和 <code><td> 加 <code>display: none

选择器写成 th:nth-child(n+4), td:nth-child(n+4)，注意 n+4 表示从第 4 个开始

如果表头有 colspan 或 rowspan，:nth-child 会失效，得换 class 控制

别忘了给前三列加 min-width（如 min-width: 80px），防止文字被强行折行挤变形

用 data-* 属性标记关键列更可控

当表格结构复杂（合并单元格、动态列）时，:nth-child 容易误杀。推荐显式标注哪些列该保留：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 给每列 <th> 和对应 <code><td> 加 <code>data-priority="1"、data-priority="2" 等
• 媒体查询里写 [data-priority="4"], [data-priority="5"] { display: none; }
• 这样即使后续增删列，只要更新 data-priority 值就能保持逻辑一致
• Bootstrap 5 的 table 类本身不干涉 data- 属性，完全安全

移动端触摸体验容易被忽略的细节

只隐藏列还不够。小屏上用户常会横向拖拽，但默认 overflow-x: auto 在某些安卓 WebView 下表现异常，导致拖不动或卡顿。

• 给 <table> 外层容器加 <code>overflow-x: auto，而不是直接加在 table 上
• 加 -webkit-overflow-scrolling: touch 提升 iOS 滚动流畅度
• 前三列里如果有长文本（比如订单号、URL），务必设 white-space: nowrap，否则换行会撑宽列宽，反而触发滚动
• 测试时重点看折叠后第一行是否对齐——display: none 的列仍占文档流位置，但表格渲染会重排，偶尔出现错位，需检查是否有未清空的 padding 或 border