手机小屏表格应有选择地隐藏非核心列：操作类、系统字段、重复/低频字段、统计类衍生值；用CSS媒体查询（如@media (max-width: 768px)）配合.col-hidden类控制显示，并补充“更多字段”提示与点击展开功能。
手机屏幕窄，列一多表格就挤成一团，文字重叠、操作区变小、横向滚动还卡顿——这不是代码写错了，而是没做“有选择的隐藏”。核心思路很直接：保留用户真正需要看的字段，把编号、操作、创建时间这类辅助信息在小屏下收起来。
哪些列适合隐藏
优先考虑隐藏这些类型列：
- 操作类：编辑、删除、详情按钮等，改用底部操作浮层或长按菜单更合适
- 系统字段：ID、创建人、更新时间、状态码等，日常浏览中极少被主动查看
- 重复/低频字段：比如“所属部门ID”和“所属部门名称”同时存在，只留后者即可
- 统计类衍生值：“占比%”“排名序号”这类可后期计算的，移动端暂不展示
用媒体查询精准控制隐藏
别直接删HTML，用CSS类+媒体查询最稳妥。给要隐藏的列加统一类名（如.col-hidden），再在小屏断点里设为不可见：
@media (max-width: 768px) {
.col-hidden {
display: none !important;
}
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 断点值建议用768px或640px，覆盖主流手机竖屏宽度
- 加!important防止被框架默认样式覆盖（尤其用Bootstrap Table时）
隐藏后要补一点小细节
光藏列不够，得让用户知道“还有内容”：
- 在表头右侧加个「…」图标或“更多字段”提示文字
- 点击某行时，用轻量弹层或底部展开区显示被隐藏的字段值
- 如果用了Bootstrap，可配合data-mobile-responsive="true"和columnsHidden参数自动处理
基本上就这些。隐藏不是删减，是聚焦——把屏幕留给真正该看的信息。
