求助：Bootstrap 4替换hidden-xs无法隐藏表格单元格问题

嘿，我完全懂你这种卡壳的感觉！Bootstrap 4 把旧版的 hidden-* 系列类换成了响应式显示类，但表格元素有它自己的小脾气，这大概率就是你碰壁的原因。

核心问题：表格单元格的display属性特殊性 #

Bootstrap 4 的 d-sm-block 类会把元素的display设为block，但表格单元格（<td>/<th>）默认的display是table-cell。直接用d-none d-sm-block不仅会破坏表格布局，还可能因为样式优先级的问题，被表格的默认样式覆盖，导致完全没效果。

正确的解决办法 #

1. 使用对应表格元素的响应式类

Bootstrap 4 专门为表格元素提供了d-*-table-cell这类类，用来保持表格布局的同时实现响应式隐藏/显示。你应该把d-none d-sm-block换成d-none d-sm-table-cell：

<table class="table">
  <thead>
    <tr>
      <th>基础列</th>
      <!-- 仅在sm及以上屏幕显示的表头 -->
      <th class="d-none d-sm-table-cell">大屏专属表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容项1</td>
      <!-- 仅在sm及以上屏幕显示的单元格 -->
      <td class="d-none d-sm-table-cell">大屏专属内容</td>
    </tr>
  </tbody>
</table>

这个类会在xs屏幕（<576px）时隐藏单元格，在sm及以上屏幕恢复table-cell的显示状态，完美适配表格布局。

2. 排查样式优先级冲突

如果上面的方法还是没效果，你可以检查下：

• 是否同时引入了Bootstrap 3和4的CSS文件？版本冲突会导致样式混乱。
• 有没有自定义CSS覆盖了Bootstrap的类？可以用浏览器的开发者工具（F12）查看单元格的display属性，看看是不是被其他样式覆盖了。
• 必要时可以临时用!important强制生效（不推荐长期使用，建议优化选择器优先级）：

.d-none.d-sm-table-cell {
  display: table-cell !important;
}

3. 关于你提到的那篇文章

《Missing visible-** and hidden-** in Bootstrap v4》里的方案大多是针对普通块级元素（比如<div>、<p>）的，没有考虑表格元素的table-cell特殊性，所以直接套用在<td>上自然没效果啦。

内容的提问来源于stack exchange，提问作者SxChoc