Bootstrap中.table-responsive水平可滚动时显示背景图标实现方法

你原有CSS存在语法错误：background-image属性值缺少url()包裹、末尾多了一个无效右括号，需要先修复基础样式，再通过状态判断实现「仅出现横向滚动条时显示图标」的效果，以下是两种可直接用在Bootstrap+Drupal环境的方案：

方案1：精准判断（推荐） #

通过JS检测容器真实溢出状态控制图标显示，无论什么屏幕尺寸，只有表格真的超出容器宽度、出现横向滚动条时才显示图标，准确率100%。

• 第一步：替换原有CSS样式，默认隐藏提示图标，仅给溢出状态的容器挂载图标样式

.tablefield-wrapper .table-responsive {
  padding-top: 2.5em;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 30px;
  /* 默认隐藏提示图标 */
  background-image: none;
}
/* 容器存在横向溢出时显示图标 */
.tablefield-wrapper .table-responsive.is-scrollable {
  background-image: url('/sites/default/files/muis-scroll.png');
}

• 第二步：添加溢出检测逻辑，把下面的代码放到主题自定义JS文件中，会在页面加载、窗口尺寸变化时自动检测所有表格的溢出状态

(function () {
  // 检测所有响应式表格的横向溢出状态
  function updateTableScrollTip() {
    document.querySelectorAll('.tablefield-wrapper .table-responsive').forEach(function(container) {
      const hasScroll = container.scrollWidth > container.clientWidth;
      container.classList.toggle('is-scrollable', hasScroll);
    });
  }

  // 页面加载完成后首次检测
  document.addEventListener('DOMContentLoaded', updateTableScrollTip);
  // 窗口尺寸变化时重新检测
  window.addEventListener('resize', updateTableScrollTip);
})();

方案2：纯CSS简化方案 #

如果不需要100%精准判断，可以直接匹配Bootstrap响应式表格的默认断点规则，不需要写JS：Bootstrap默认的.table-responsive类在屏幕宽度小于768px时会强制启用横向滚动，在这个断点下显示图标即可。

• 直接使用以下CSS替换原有样式即可

.tablefield-wrapper .table-responsive {
  padding-top: 2.5em;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 30px;
  background-image: none;
}
/* 匹配Bootstrap小屏断点，该尺寸下响应式表格默认出现横向滚动条 */
@media (max-width: 767.98px) {
  .tablefield-wrapper .table-responsive {
    background-image: url('/sites/default/files/muis-scroll.png');
  }
}

注意：这个方案的缺点是如果小屏下表格内容刚好没超出容器，图标也会显示，适合对精度要求不高的场景。

内容的提问来源于stack exchange，提问作者Carlo Van den Bunder