小屏幕下Table只显示三列需用CSS媒体查询配合语义化类名控制显隐，而非仅依赖table-responsive；须为th和td逐列添加对应col-*类，再在@media (max-width: 575.98px)中设display: none隐藏非关键列，并可通过data-属性实现移动端详情展开。
小屏幕下 Table 只显示三列：用 table-responsive 不够，得靠 CSS 控制显隐
Bootstrap 默认的 table-responsive 只是把整张表包进横向滚动容器，不解决“只显示关键列”的需求。真要实现小屏精简展示（比如只留 name、status、action），必须配合类名 + 媒体查询手动控制列显隐。
核心思路：给每列加语义化类名（如 col-name、col-status），再在 @media (max-width: 576px) 下隐藏非关键列。
- 别用
col-*类控制列——那是栅格系统，对<td> 无效 <li>务必给 <code><th> 和对应 <code><td> 加相同类名，否则表头/数据列错位 <li>隐藏时用 <code>display: none，不要用visibility: hidden（仍占布局空间） - 如果用了
colspan或rowspan，这种方案会失效，需改用 JS 动态重组 DOM - 类名尽量语义化（如
col-status），避免用col-1这类序号型命名——维护时容易搞混哪列是关键列
怎么给列加 class：从 th 到 td 必须一一对应
Bootstrap 表格结构里，<th> 和 <code><td> 没有天然绑定关系，靠位置顺序对齐。所以加类必须严格按列顺序来：
<pre class="brush:php;toolbar:false;"><table class="table">
<thead>
<tr>
<th class="col-name">姓名</th>
<th class="col-email">邮箱</th>
<th class="col-status">状态</th>
<th class="col-action">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-name">张三</td>
<td class="col-email">zhang@example.com</td>
<td class="col-status">激活</td>
<td class="col-action"><button>编辑</button></td>
</tr>
</tbody>
</table></pre>
<ul>
<li>漏掉任意一个 <code>col-* 类，小屏下就会错列或空白
媒体查询写法：用 Bootstrap 断点变量更稳妥
直接写 max-width: 576px 虽然能用，但和 Bootstrap 4/5 的断点定义脱节。推荐复用其内置变量（如 SCSS 中）或查文档确认实际像素值：
@media (max-width: 576px) {
.col-email,
.col-other-info {
display: none;
}
}
- Bootstrap 5 的
sm断点是576px，对应@media (max-width: 575.98px)—— 写576px会导致临界点行为不一致 - 如果项目用的是 Bootstrap 4，
sm是576px起始，那隐藏规则应写成@media (max-width: 575.98px) - 别试图用
hidden-sm等旧版工具类——Bootstrap 4+ 已移除，且它们作用于整行，不是单列
移动端点击展开全量信息：用 data- 属性存原始数据
纯隐藏列不够友好。用户可能想临时看邮箱或备注，这时可在关键列里塞个「详情」按钮，用 data- 把被隐藏字段存进去：
<td class="col-name">
张三
<button type="button" class="btn btn-sm btn-outline-primary ms-2"
data-email="zhang@example.com"
data-note="VIP 用户">详情</button>
</td>
- 不要把整行 HTML 存进
data-——体积大、解析慢、XSS 风险高 - 只存纯文本字段（
email、note、id），用 JS 绑定 click 后弹出 tooltip 或 modal - 如果后端返回的是 JSON 数组，前端渲染时用
JSON.stringify()存进data-row也行，但注意转义
真正麻烦的是合并单元格、服务端分页、或者用了 DataTables 插件的表格——那些场景下，列显隐逻辑得深入插件 API 或重写渲染函数，不是加几行 CSS 就能搞定的。
