小屏幕下用 data-priority 控制列显隐最可靠：优先级数值越小越关键，需为 th 和 td 同步设置相同 data-priority 值，并在媒体查询中用 display: none 隐藏指定优先级列，配合 .table-container 滚动兜底。
小屏幕下用 data-priority 控制列显隐最可靠
Bootstrap 本身不支持按列响应式隐藏，table-responsive 只是加滚动条，不是真隐藏。必须靠自定义 CSS + data-priority 属性协同实现。关键点在于：优先级数值越小越关键，比如姓名、状态设为 data-priority="1"，薪资、备注设为 data-priority="4"，然后在媒体查询里统一控制阈值。
常见错误是只给 <th> 加 <code>data-priority，忘了 <td> 也要加——否则小屏下表头隐藏了，数据列还在，错位就不可避免。<ul><li>确保每列的 <code><th> 和所有对应行的 <code><td> 的 <code>data-priority 值完全一致
md: 768px 是较合理的折叠起点，避免过早（如 sm: 576px）导致中屏也丢失信息visibility: hidden 或 opacity: 0，它们仍占布局空间；必须用 display: none
@media (max-width: 768px) 中的隐藏规则怎么写
这段 CSS 是实际项目中验证有效的最小可行配置：
/* 小屏下隐藏 priority ≥ 3 的列 */<br>@media (max-width: 768px) {<br> th[data-priority="3"],<br> td[data-priority="3"],<br> th[data-priority="4"],<br> td[data-priority="4"] {<br> display: none;<br> }<br>}注意：不能只写 [data-priority="3"]，因为 th 和 td 是不同元素类型，CSS 选择器必须分别命中；也不能用通配符如 [data-priority^="3"]，IE 和部分旧版 Safari 不支持属性选择器的正则语法。
立即学习“前端免费学习笔记（深入）”；
如果列数多、优先级跨度大，可改用更紧凑写法：
@media (max-width: 768px) {<br> [data-priority="3"],<br> [data-priority="4"],<br> [data-priority="5"] {<br> display: none;<br> }<br>}但前提是 HTML 中所有 th 和 td 都带 data-priority，且值合法（纯数字，无空格或单位）。
为什么不用 display: none 直接套 class？
用类名（如 .col-hidden）看似简单，但维护成本高：每次增删列都要同步改 HTML 和 CSS；多人协作时容易漏掉某列的 class；动态渲染表格（如 Vue/React）还得在 JS 层手动判断列优先级并绑定 class。
data-priority 把逻辑收束在 HTML 结构层，CSS 只管“数值规则”，解耦清晰。而且它天然支持服务端渲染和静态生成场景——只要输出时带上正确属性，样式就自动生效。
- 不推荐用
nth-child()隐藏第 4 列这种写法：列顺序一变就失效，语义缺失 - 避免在 JS 中动态 toggle class 来控制显隐：破坏 CSS 响应式初衷，且可能触发重排
- 若需 JS 辅助（比如用户手动切换显示列），仍应通过修改
data-priority值来驱动，保持单向数据流
移动端滚动容器要不要加？
要，但它是兜底方案，不是替代方案。即使你已用 data-priority 隐藏了次要列，仍建议在外层包一个 .table-container 并启用 overflow-x: auto。
原因很实在：用户缩放页面、横屏查看、或某些安卓 WebView 渲染异常时，剩余列仍可能超宽；另外，辅助技术（如屏幕阅读器）对 display: none 的处理不一致，保留滚动能力可确保内容不丢失。
关键细节：
- 必须对容器设
overflow-x: auto，而不是直接对table设——否则 iOS 上可能无法滑动 - 加
-webkit-overflow-scrolling: touch提升 iOS 滑动跟手度 -
white-space: nowrap要加在th/td上，不是table上，否则影响文字折行逻辑
真正难的从来不是写几行 CSS，而是让每一列的 data-priority 在整张表里对得上、改得清、查得准——结构不对，样式再漂亮也白搭。
