Bootstrap怎么修改Table表格在小屏幕下只显示核心数据列-Bootstrap教程-PHP中文网

小屏表格应优先保留核心列（如id、姓名、状态），通过data-priority标记列优先级并配合媒体查询统一隐藏高优先级列，确保th与td值一致且用display:none；若用bootstrap-table则须配置columns.visible而非css隐藏。

bootstrap怎么修改table表格在小屏幕下只显示核心数据列

不能靠 table-responsive 解决——它只加横向滚动，不隐藏列；真要小屏只留核心列（比如 ID、姓名、状态），得用 CSS 媒体查询 + 列标识控制显隐，且必须同步处理 <th> 和 <code><td>，否则错位。 <h3>用 <code>data-priority 标记列优先级再统一隐藏

这是最可控、结构清晰的做法，尤其适合列数固定、语义明确的业务表格。关键不是“隐藏哪些”，而是“保留哪些”——把核心列设为低 priority 值，非核心设高值，再用媒体查询批量关掉高值列。

data-priority="1" 给 ID 列，data-priority="2" 给姓名，data-priority="3" 给状态，其余列从 4 开始递增
确保每个 <th> 和对应位置所有 <code><td> 的 <code>data-priority 值完全一致，否则同列不同行会错位
CSS 中必须用 display: none，不用 visibility: hidden——后者占空间，表格宽度会塌缩异常

写法示例：

@media (max-width: 768px) {
  [data-priority="4"], [data-priority="5"], [data-priority="6"] {
    display: none;
  }
}

用 `:nth-child()` 直接切前三列（简单场景适用）

如果结构规整、无 colspan/rowspan，且你明确只要前 3 列，这个方案零侵入、无 JS、兼容性好。

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

选择器必须同时命中 <th> 和 <code><td>：<code>th:nth-child(n+4), td:nth-child(n+4)
别只写 td:nth-child(n+4)——表头没同步隐藏，小屏下表头和内容列就对不上
前三列建议加 min-width: 100px 和 white-space: nowrap，防文字折行撑宽列
如果用了 bootstrap-table 这类插件，此法大概率失效：它会重绘 DOM，:nth-child() 指向的不再是原始列序

Bootstrap Table 插件下必须改 `columns.visible` 配置

用 bootstrap-table 时，任何基于 class 或 CSS 的隐藏都会破坏内部列映射——排序、导出、固定列全出问题。唯一正解是初始化前动态设列的 visible 字段。

检测屏幕宽度用 window.matchMedia('(max-width: 768px)')，别用 $(window).width() —— 初始化时可能还没 resize 完
小屏下只让关键三列的 visible: true，其余全 false；且这三列在 columns 数组里必须连续排在前三位
如果启用了 fixedNumber: 1，第一列（如 ID）必须始终 visible: true，否则固定列会空或错位
导出逻辑不受影响——getData() 默认取全量数据，但若需导出视图列，得自己过滤数据，不能依赖插件自动识别 visible 状态