d-none d-lg-table-cell 是最稳妥方案，需同时作用于 th 和 td 以避免错位；Bootstrap 表格中应避免 d-md-none 或混用 HTML 类与插件 API，动态列须由 JS 或模板层统一控制。
用 d-none d-lg-block 隐藏 PC 端列最稳妥
想让一列只在手机/平板显示、PC 完全不出现，d-none d-lg-block 是 Bootstrap 5 中最可靠的选择。它不是“视觉隐藏”，而是彻底移除渲染，不占位、不影响表格结构。
常见错误是写成 d-md-none：MD 断点（≥768px）会把部分横屏手机和平板也干掉，但很多用户在 900px 左右的折叠屏或 iPad mini 上仍算“PC 视口”，结果该列意外消失。LG 断点（≥992px）才真正对应主流桌面设备宽度。
-
d-none全局设为display: none -
d-lg-block仅在 ≥992px 时恢复为display: block——但注意：<th> 和 <code><td> 默认是 <code>table-cell，直接加block会破坏表格布局 - 正确写法必须匹配 display 类型：
d-none d-lg-table-cell - 静态表格示例：
<th class="d-none d-lg-table-cell">操作</th>，所有对应<td> 也要带相同 class <li>别依赖 <code>colgroup+col：Bootstrap 不接管它的响应式逻辑，CSS 里还得额外写媒体查询才能生效 - 如果用了
data-priority这类自定义属性，确保<thead> 和 <code><tbody> 中同列的值完全一致，否则 CSS <code>[data-priority="3"]选择器会漏掉某些<td> <h3>用 <code>bootstrapTable插件时，优先走 API 而非 CSS 类 - JS 调用示例：
$('#myTable').bootstrapTable('hideColumn', 'SellerName'); - 配置项写法：
{ field: 'GoodsId', title: '商品ID', hidden: true } - 别混用：一边调
hideColumn，一边又在 HTML 里加d-none，容易造成状态不一致，调试时更难定位 <div class="table-responsive"><table class="table">...</table></div>- 对可能溢出的
<td> 加：<code>class="text-truncate" style="max-width: 200px;" - 别指望
d-lg-table-cell自动压缩内容：它只管显隐，不管尺寸
实际最难处理的，是列顺序不固定或服务端动态返回字段的场景——此时纯 CSS 的
<th> 和 <code><td> 必须同步加类，否则表头/数据错位
<p>只给 <code><th> 加 <code>d-none d-lg-table-cell，而 <td> 没加，会导致表头消失但数据列还在，整列看起来“偏移”或内容挤到前一列下面。
<p>Bootstrap 不自动关联表头与单元格，你得手动确保每行 <code><td> 的位置和 <code><th> 一致。固定列序时，直接复制类名最安全；列动态生成时，建议用 JS 批量注入，或模板层（如 Vue 的 <code>v-for）统一控制。
如果你用的是 bootstrapTable（非原生 Bootstrap 表格），直接改 HTML 类名基本无效——插件会重绘 DOM，手动加的 d-none 可能被覆盖或忽略。
应该调用插件内置方法：hideColumn('字段名') 或初始化时在 columns 配置里设 hidden: true。这样插件知道哪列该跳过渲染，还能联动 showColumns 按钮。
横向滚动条没消失？检查是否漏了 table-responsive
即使列被隐藏，如果表格总宽度仍超容器，浏览器仍会出横向滚动条——这不是隐藏失败，而是剩余列内容太宽（比如长文本、未换行的 URL）。
原生 Bootstrap 表格没有自动收缩机制。若想彻底避免滚动条，得配合 table-responsive 容器（它加了 overflow-x: auto），再对宽字段加 text-truncate 或 max-width 限制。
:nth-child() 会失效，data-priority 又依赖前后端约定一致。这种情况下，必须由 JS 或框架层（React/Vue）在渲染前就决定哪些列该进 DOM，而不是靠样式“藏起来”。
