小屏幕下隐藏某些列最稳妥的方法是使用.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> 和 <code><td> 加自定义属性，用 JS 控制。
<p>例如标记哪些列属于“小屏核心列”：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><th data-bs-responsive-col="essential">姓名</th><br><th data-bs-responsive-col="optional">邮箱</th><br><th data-bs-responsive-col="optional">注册时间</th></pre>
<p>再配合简单脚本：</p>
<pre class="brush:php;toolbar:false;">const isSmall = window.innerWidth document.querySelectorAll('[data-bs-responsive-col="optional"]').forEach(el => {<br> el.classList.toggle('d-none', isSmall);<br>});</pre>
<ul>
<li>注意监听 <code>resize 事件时要做节流，否则频繁触发影响性能
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></style>标签里写!important—— 后续维护时很难定位覆盖来源 - 检查浏览器开发者工具的“Computed”面板，确认最终生效的是哪条
display声明
移动端真机测试时，列宽挤压导致文字换行或溢出
隐藏列后，剩余列的宽度没重分配，可能撑满屏幕甚至横向滚动。这不是显示逻辑问题，而是表格布局没适配。
- 给
<table> 加 <code>class="table table-responsive"，让整个表可横向滚动（最简方案） - 对核心列设
style="min-width: 120px;"，防文字被压缩成一堆点 - 用
text-truncate类配合title属性显示完整内容：<td title="很长的邮箱地址"><span class="text-truncate">xxx@...</span></td>
- 别依赖
table-layout: fixed —— 它会让所有列等宽，反而破坏语义优先级
实际做时，多数情况用第一种纯 CSS 方案就够了。真正容易被忽略的是：隐藏列后，
<thead> 和 <code><tbody> 的列数必须严格一致，否则表格结构错位 —— 即使某列 <code>display: none，也要保留在 DOM 中。
