Bootstrap 5 移除了 hidden-xs 等旧类，改用 d-none + 响应式后缀（如 d-md-table-cell）控制显隐；表格单元格需匹配 display 类型，整列隐藏推荐 CSS :nth-child() 或自定义属性选择器。
为什么 hidden-xs 在 Bootstrap 5 里不生效？
Bootstrap 5 彻底移除了 hidden-xs、visible-md 这类旧版响应式工具类。如果你照着 Bootstrap 4 的写法直接套用，表格列会完全不隐藏——不是“没效果”，而是类名根本不存在，CSS 规则压根没加载。
- Bootstrap 5 改用
d-none+ 响应式断点后缀（如d-md-table-cell）控制显隐 - 表格单元格（
<td>、<code><th>）默认是 <code>display: table-cell，不能直接用d-sm-none，否则会破坏表格布局 - 正确做法是改用
d-none d-sm-table-cell这类组合：先设为隐藏，再在指定断点“恢复”为表格单元格
示例：让「操作」列仅在桌面显示
<td class="d-none d-md-table-cell">编辑 & 删除</td>
如何让整列（<th> + 所有 <td>）同步隐藏？
单个单元格加类只能局部生效，但用户真正需要的是“整列消失”，包括表头和所有数据行。手动给每行 <td> 加类太脆弱，容易漏或错位。<ul>
<li>推荐用 <code>colgroup + col 配合 CSS 控制，但 Bootstrap 不接管 col 的响应式逻辑，需自行补充
<th> 和对应位置的 <td>，再通过 CSS 的 :nth-child() 定位（适合固定列序） 常用写法（假设「状态」列是第 3 列）：
/* 移动端隐藏第3列的表头和所有单元格 */<br>@media (max-width: 767.98px) {<br> .table th:nth-child(3),<br> .table td:nth-child(3) {<br> display: none;<br> }<br>}
用 data-bs-responsive-col 这种自定义属性可行吗？
有人想用 HTML 自定义属性标记要隐藏的列，再配合 JS 统一处理。技术上可以，但没必要引入额外复杂度：
- 如果只是静态表格，纯 CSS 已足够，JS 属于过度设计
- 若表格由框架（如 Vue/React）渲染，建议把隐藏逻辑放在模板层，用
v-if或{showCol && <th>} 控制，而非依赖 CSS 类切换 <li>真要用属性驱动，别用 <code>data-加 JS 监听，直接用 CSS 属性选择器更轻量：[data-hide-on-mobile] { display: none; }，然后在<th data-hide-on-mobile>和对应<td data-hide-on-mobile>上标记 - 表格默认是
table-layout: auto，列宽由内容撑开，隐藏列后其他列通常能自适应，问题不大 - 但若用了
table-layout: fixed（常见于对齐严格场景），必须配合width设置，否则隐藏列会导致整体宽度计算错乱 - 解决办法：给表格加
table-responsive容器，或用min-width限定最小宽度，避免内容挤出
注意：CSS 属性选择器不支持伪类联动（比如无法自动匹配 nth-child），仍需确保标记一致。
隐藏列后表格宽度异常或出现横向滚动条？
这是最常被忽略的副作用。单纯设 display: none 不会重分配剩余列的宽度，尤其当原列设置了 width 或使用了 table-layout: fixed 时：
立即学习“前端免费学习笔记（深入）”；
关键点：隐藏列 ≠ 删除列，DOM 仍在，只是不可见。如果列内有大量文本或图片，即使隐藏，仍可能影响渲染性能或 SEO，敏感内容建议服务端过滤。
