如何编写仅作用于带滚动条表格的CSS选择器

首先要明确：可滚动的表格通常会在外层套一个设置了max-height+overflow: auto的容器，滚动条实际是出在这个外层容器上，而非table元素本身，以下两种方案都基于这个常规结构实现：

<!-- 参考HTML结构 -->
<div class="table-container">
  <table>
    <thead><!-- 表头内容 --></thead>
    <tbody><!-- 表格数据 --></tbody>
  </table>
</div>

/* 容器基础样式 */
.table-container {
  max-height: 400px; /* 自定义最大高度，超出后出滚动条 */
  overflow: auto;
}

方案1：纯CSS实现（兼容性：Chrome 115+、Firefox 122+、Safari 17.4+） #

利用CSS滚动驱动动画的特性：只有元素存在滚动空间（即出现滚动条）时，滚动驱动的动画才会触发，我们可以通过动画动态修改CSS变量来控制表头样式：

/* 滚动条存在时才会触发动画，给变量赋值 */
@supports (animation-timeline: scroll()) {
  .table-container {
    animation: set-scroll-offset steps(1) both;
    animation-timeline: scroll(nearest);
    animation-range: 0 1px;
  }
  @keyframes set-scroll-offset {
    to {
      --scrollbar-offset: .5em;
    }
  }
}
/* 表头默认样式，无滚动条时变量默认值为0，宽度为100% */
table thead {
  width: calc(100% - var(--scrollbar-offset, 0em));
}

方案2：JS实现（全浏览器兼容） #

通过JS检测容器是否出现滚动条，动态给容器加标识类，用类选择器控制样式生效：

JS逻辑 #

function checkTableScrollbar() {
  const tableWraps = document.querySelectorAll('.table-container');
  tableWraps.forEach(wrap => {
    // 判断纵向滚动条是否存在，需要判断横向就改为scrollWidth > clientWidth
    const hasScroll = wrap.scrollHeight > wrap.clientHeight;
    wrap.classList.toggle('has-scrollbar', hasScroll);
  })
}
// 页面加载完成检测
window.addEventListener('load', checkTableScrollbar);
// 窗口尺寸变化时重新检测
window.addEventListener('resize', checkTableScrollbar);
// 若表格内容是动态加载的，内容更新后手动调用checkTableScrollbar()即可

最终CSS代码（补全你需要的选择器） #

.table-container.has-scrollbar table thead {
  width: calc( 100% - .5em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

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