小屏幕下隐藏某些列最稳妥的方法是使用.d-none + .d-sm-table-cell组合；需确保thead与tbody列数一致，避免结构错位，并配合table-responsive等优化移动端显示效果。
小屏幕下隐藏某些列，用 .d-none + .d-sm-table-cell 组合最稳妥
Bootstrap 5 默认不提供“仅在小屏显示某几列”的内置类，但靠响应式显示类就能干净实现。关键不是删列，而是控制每列在不同断点的可见性。
常见错误是只加 .d-sm-none，结果中屏（sm）及以上也消失了；或者误用 .d-md-none，导致平板上列就不见了。正确做法是反向控制：默认隐藏，只在需要的断点显示。
- 对「小屏必须保留」的列（比如姓名、操作），加
.d-table-cell（强制行内表格单元格）+.d-sm-table-cell（sm 及以上显示） - 对「小屏要隐藏」的列（比如创建时间、IP 地址），加
.d-none+.d-sm-table-cell—— 这样它只在 sm 及以上才出现 - 别用
.d-xs-none或.d-mobile-none，Bootstrap 5 已移除 xs 断点，最小是sm
用 data-bs-responsive-col 自定义属性 + JS 动态切换更灵活
如果列显隐逻辑复杂（比如根据设备宽度动态决定显示哪三列），纯 CSS 类会写得很长。这时可以给 <th> 和 <td> 加自定义属性，用 JS 控制。
例如标记哪些列属于“小屏核心列”：
<th data-bs-responsive-col="essential">姓名</th><br><th data-bs-responsive-col="optional">邮箱</th><br><th data-bs-responsive-col="optional">注册时间</th>
再配合简单脚本：
const isSmall = window.innerWidth < 576;<br>document.querySelectorAll('[data-bs-responsive-col="optional"]').forEach(el => {<br> el.classList.toggle('d-none', isSmall);<br>});
- 注意监听
resize事件时要做节流，否则频繁触发影响性能 - 服务端渲染（如 SSR）场景下，JS 执行前用户会看到全量列，建议搭配
prefers-reduced-motion或初始 CSS 隐藏 - 别用
window.matchMedia查询(max-width: 575.98px)—— 数值要和 Bootstrap 的$grid-breakpoints完全一致，否则响应不一致
用 @media 覆盖 Bootstrap 默认样式时，选择器权重必须足够
有人直接写 @media (max-width: 575.98px) { .hide-on-mobile { display: none !important; } }，结果无效。原因通常是 Bootstrap 的 .d-none 已带 !important，而你的规则没压过它。
- 要么复用 Bootstrap 原生类（推荐），避免重复造轮子
- 要么提高选择器权重：用
table .hide-on-mobile或tbody tr td.hide-on-mobile - 绝对不要在
<style>标签里写!important—— 后续维护时很难定位覆盖来源 - 检查浏览器开发者工具的“Computed”面板，确认最终生效的是哪条
display声明
移动端真机测试时，列宽挤压导致文字换行或溢出
隐藏列后，剩余列的宽度没重分配，可能撑满屏幕甚至横向滚动。这不是显示逻辑问题，而是表格布局没适配。
- 给
<table>加class="table table-responsive"，让整个表可横向滚动（最简方案） - 对核心列设
style="min-width: 120px;"，防文字被压缩成一堆点 - 用
text-truncate类配合title属性显示完整内容：<td title="很长的邮箱地址"><span class="text-truncate">xxx@...</span></td></li> <li>别依赖 <code>table-layout: fixed
—— 它会让所有列等宽，反而破坏语义优先级
<thead> 和 <tbody> 的列数必须严格一致，否则表格结构错位 —— 即使某列 display: none，也要保留在 DOM 中。 
