粘性表头横向滚动后背景色失效的原因及替代解决方案咨询

嗨，我来帮你拆解这个问题，先把你的代码清晰列出来，再分析原因和给出替代方案：

你的现有代码 #

CSS 部分

.table__container { position: relative; }
.table__header { position: sticky; top: 0; background-color: red; z-index: 1; }
.table__header, .table__body--row { display: flex; }
.table__header--cell, .table__body--cell {
  flex-shrink: 0;
  flex-basis: 400px;
  border: solid 1px black;
  padding: 8px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}
.table__container { width: 1000px; height: 600px; overflow: auto; }

HTML 部分

<div class="table__container">
  <div class="table__header">
    <div class="table__header--cell">Column 1</div>
    <div class="table__header--cell">Column 2</div>
    <div class="table__header--cell">Column 3</div>
    <div class="table__header--cell">Column 4</div>
    <div class="table__header--cell">Column 5</div>
    <div class="table__header--cell">Column 6</div>
    <div class="table__header--cell">Column 7</div>
    <div class="table__header--cell">Column 8</div>
    <div class="table__header--cell">Column 9</div>
    <div class="table__header--cell">Column 10</div>
  </div>
  <div class="table__body">
    <div class="table__body--row">
      <div class="table__body--cell">Row 1 Column 1</div>
      <div class="table__body--cell">Row 1 Column 2</div>
      <div class="table__body--cell">Row 1 Column 3</div>
      <div class="table__body--cell">Row 1 Column 4</div>
      <div class="table__body--cell">Row 1 Column 5</div>
      <div class="table__body--cell">Row 1 Column 6</div>
      <div class="table__body--cell">Row 1 Column 7</div>
      <div class="table__body--cell">Row 1 Column 8</div>
      <div class="table__body--cell">Row 1 Column 9</div>
      <div class="table__body--cell">Row 1 Column 10</div>
    </div>
  </div>
</div>

为什么横向滚动后表头背景色会“消失”？ #

这其实不是sticky定位的锅，而是元素宽度和背景渲染范围不匹配导致的：

1. .table__header是块级元素，默认宽度继承父容器.table__container的1000px，但你给每个表头单元格设置了flex-shrink: 0和flex-basis: 400px，10个单元格总宽度达到4000px，远超出表头容器的宽度。
2. 你把红色背景加在了.table__header上，但这个背景只会渲染在表头容器自身的1000px宽度范围内；而超出这个范围的单元格本身没有背景色，横向滚动到这些区域时，就会透出下方内容，看起来像表头背景“没了”。
3. sticky定位只负责让表头在垂直滚动时固定在顶部，完全不影响横向的宽度和背景渲染逻辑。

除了给单元格加background-color: inherit的替代方案 #

最直接的修复方法是让表头容器的宽度匹配所有单元格的总宽度，这样红色背景就能覆盖整个表头区域：
修改.table__header的CSS，添加width: fit-content（或者min-width: max-content，效果一致）：

.table__header {
  position: sticky;
  top: 0;
  background-color: red;
  z-index: 1;
  width: fit-content; /* 新增这一行，让表头宽度自适应所有单元格总宽度 */
}

这样表头容器的宽度会自动拉伸到能容纳所有单元格的宽度，红色背景就会覆盖整个表头区域，横向滚动时所有单元格下方都有红色背景了。

内容来源于stack exchange