应使用.d-none.d-sm-table-cell组合实现小屏隐藏非关键列，而非.d-md-table-cell；因sm断点（576px）更符合移动端分界，且必须同步为和添加相同类以避免错位，同时保留HTML结构不删列。
小屏下隐藏非关键列，用 .d-none + .d-sm-table-cell 组合控制显示
bootstrap 5 默认不提供“仅保留某几列”的响应式表格原生方案，得靠手动控制每列的可见性。核心思路是：在小屏（xs）下把不需要的列设为 display: none，并在中屏及以上恢复显示。不能只用 .d-md-none 这类单一类名，否则列宽错乱或内容溢出。
<th> 和对应 <code><td> 必须使用完全一致的响应式类，否则表头与数据列错位 <li>推荐用 <code>.d-none .d-sm-table-cell（而非.d-md-table-cell），因为sm断点（576px）才是移动端和桌面的分水岭，xs下彻底隐藏，sm起恢复为表格单元格- 避免用
.d-sm-block或.d-sm-flex，它们会破坏表格结构，导致<table> 渲染异常 <h3>怎么写 HTML 才不崩布局？必须保证 <code><tr> 内列数一致 <p>即使某些列在小屏隐藏，HTML 中仍要保留在 <code><tr> 里——删掉会导致表格结构断裂、表头对不齐、甚至整个 <code><tbody> 渲染错乱。隐藏 ≠ 删除。 <ul> <li>给要保留的三列（比如 <code>name、status、action）不加任何隐藏类 - 其余列统一加上
d-none d-sm-table-cell - 如果用了
<colgroup></colgroup>，也要同步为对应列设置相同类，否则 Safari 下可能出现宽度残留
| Name | Status | Action | Created | Updated |
|---|---|---|---|---|
| User A | Active | 2024-01-01 | 2024-03-15 |
为什么不用 responsive-table 类？它解决不了“选列”问题
.table-responsive 只是给表格加横向滚动容器，所有列都还在，只是能左右滑动——这不是“只显示三列”，而是“全列挤在一起可滚动”。用户要的是信息降噪，不是缩放+拖拽。
- 滚动体验差，尤其手指操作时容易误触、难精准定位
- 屏幕窄时即使滚动，
th文字也常被截断，可读性低 - 无障碍支持弱：SR（屏幕阅读器）仍会读出所有列，包括隐藏的
真要适配更细粒度断点？自己加 CSS 类比改 Bootstrap 源码靠谱
Bootstrap 官方只有 sm/md/lg 等标准断点，如果你需要“仅在 iPhone SE 宽度（375px）下显示两列”，别试图覆盖 $grid-breakpoints 重编译，直接写一个轻量级类：
@media (max-width: 375px) {
.d-xs-2cols > thead > tr > th:not(:nth-child(-n+2)),
.d-xs-2cols > tbody > tr > td:not(:nth-child(-n+2)) {
display: none !important;
}
}
然后在 <table class="table d-xs-2cols"> 上用。注意：<code>:nth-child 选择器必须严格匹配你想要保留的列序号，且 !important 是为了压过 Bootstrap 的 display 声明——这点很容易漏，一漏就失效。
