垂直滚动时HTML表格粘性首列抖动问题求助

表格首列使用position: sticky固定时出现垂直滚动抖动（移动端尤为明显），通常由渲染帧率不一致、布局不稳定或元素重排导致，以下是针对性解决方案：

一、添加硬件加速优化渲染 #

给sticky元素添加GPU加速属性，让浏览器将其单独分层渲染，减少滚动时的重绘冲突：

.fixed {
  background-color: red;
  position: sticky;
  left: 0;
  /* 触发GPU加速，解决滚动抖动 */
  transform: translateZ(0);
  will-change: transform;
  /* 提升层级，避免被其他单元格遮挡 */
  z-index: 1;
}

二、固定表格布局与列宽 #

使用table-layout: fixed替代auto，固定列宽避免自适应布局带来的抖动：

.table {
  table-layout: fixed;
  border-spacing: 0px;
  width: 100%;
}

.fixed {
  /* 补充固定列宽，根据实际需求调整 */
  width: 120px;
}

三、稳定图片元素布局（针对实际场景） #

固定列包含图片时，需确保图片加载不触发布局重排：

.fixed img {
  display: block; /* 消除图片底部默认空白 */
  width: 100%;
  height: auto;
  /* 可选：设置固定高度，彻底避免高度变化 */
  /* height: 80px; */
}

修改后的完整代码 #

CSS #

.content {
  margin: 5rem;
}

.container {
  border: solid 1px green;
  border-top: none;
  overflow-x: scroll;
}

.fixed {
  background-color: red;
  position: sticky;
  left: 0;
  transform: translateZ(0);
  will-change: transform;
  z-index: 1;
  width: 120px;
}

.table {
  table-layout: fixed;
  border-spacing: 0px;
  width: 100%;
}

.cell {
  border: 1px blue solid;
  border-left: none;
  border-bottom: none;
}

.fixed img {
  display: block;
  width: 100%;
  height: auto;
}

HTML #

<div class="content">
  <div class="container">
    <div class="options">
      OPTIONS!
    </div>
    <div class="over">
      <table class="table">
        <thead>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
            <th class="cell">Not Fixed</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
          </tr>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
          </tr>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
          </tr>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
          </tr>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
          </tr>
          <tr>
            <th class="fixed cell">Fixed</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
            <th class="cell">Content...</th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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