Bootstrap 5 不支持 d-lg-table-cell，需为同列的 th 和 td 同时添加自定义类（如 col-desktop-only），配合媒体查询 @media (max-width: 991.98px) { .col-desktop-only { display: none !important; } } 实现列级响应式隐藏。
Bootstrap 5 怎么用 d-none d-lg-table-cell 控制列显隐
Bootstrap 5 没有内置的“某几列仅桌面显示”类，必须手动组合响应式工具类。直接用 d-none d-lg-table-cell 是常见误区——d-lg-table-cell 并不存在，Bootstrap 不提供针对 <td> 或 <th> 的独立 display 响应式类。
正确做法是：把整列包装进 <div class="d-none d-lg-table-cell">？不行，表格结构不允许在 <tr> 内塞 <div>。所以得靠 CSS + Bootstrap 工具类协同实现。
- 对
<th>和对应所有<td>单独加类（比如col-desktop-only） - 配合自定义 CSS 规则：
@media (max-width: 991.98px) { .col-desktop-only { display: none !important; } } - 不能只给
<th>加类而漏掉<td>，否则小屏下表头消失但数据还在，结构错乱 - 避免用
d-none d-xl-block这类组合——它只控制元素自身 display，不保证表格单元格语义和渲染行为一致
为什么不用 visually-hidden 或 sr-only
visually-hidden 只隐藏视觉但保留可访问性与 DOM 占位，表格里会导致空白列撑开宽度、影响对齐；sr-only 同理，且专为屏幕阅读器设计，不是响应式控制手段。
真正需要的是从渲染层移除该列，而非“看不见但还在”。所以必须用 display: none，且要确保 <th> 和所有同列 <td> 同步生效。
- 如果只隐藏
<th>，小屏时用户不知道这列数据代表什么 - 如果只隐藏
<td>，表头残留会造成表头数量 ≠ 数据列数量，部分浏览器会自动补空列，破坏样式 - Bootstrap 的
table-responsive容器无法解决列级显隐，它只是让整张表横向滚动
实操：给第 3 列和第 5 列添加桌面专属类
假设 HTML 结构标准：
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>部门</th>
<th class="col-desktop-only">工号</th>
<th>入职时间</th>
<th class="col-desktop-only">直属上级</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>前端</td>
<td class="col-desktop-only">FE001</td>
<td>2022-03</td>
<td class="col-desktop-only">李经理</td>
</tr>
</tbody>
</table>
然后加一行 CSS（建议放在项目 custom.css 或 style 标签内）：
@media (max-width: 991.98px) {
.col-desktop-only {
display: none !important;
}
}
- 断点值
991.98px对应 Bootstrap 5 的lg下界（lg起始于992px），确保在lg及以上显示，md及以下隐藏 - 必须加
!important，因为 Bootstrap 的table相关样式优先级高，普通声明可能被覆盖 - 不要用
col-xxl-类替代——那些是栅格类，对表格单元格无效
Vue/React 动态场景下怎么处理
如果表格行由循环生成（如 v-for 或 {data.map()}），别在模板里硬写 class="col-desktop-only" 到每个 <td> 上。容易漏、难维护。
更稳妥的方式是：提前按列索引标记哪些列需隐藏，再动态绑定 class：
// Vue 示例：columns = [{ key: 'name' }, { key: 'dept' }, { key: 'id', desktopOnly: true }, ...]
<th v-for="(col, i) in columns" :key="i" :class="{ 'col-desktop-only': col.desktopOnly }">{{ col.label }}</th>
<td v-for="(col, i) in columns" :key="i" :class="{ 'col-desktop-only': col.desktopOnly }">{{ row[col.key] }}</td>
- 列配置统一管理，改一处就能同步控制表头和所有数据行
- 避免手写重复 class，减少 typo 风险
- 服务端渲染或 SSR 场景下，同样适用该模式，无需 JS 介入即可生效
最麻烦的其实是合并单元格（rowspan/colspan）——一旦某列被隐藏，跨列逻辑会断裂，这类表格建议放弃响应式列隐藏，改用卡片式折叠或抽离为详情页。
