粘性表头无法铺满容器滚动宽度的解决方法咨询

你的问题本质是position: sticky元素的宽度基于容器的可视宽度计算，而容器的滚动宽度是由内部宽内容撑开的，导致表头背景无法覆盖滚动区域。以下是几种实用的解决办法：

方法1：改用表格布局（最省心） #

表格结构天然适配这种场景，表头设置position: sticky后会自动跟随表格的滚动宽度，背景能完全铺满。修改代码如下：

.container {
  overflow: auto;
  height: 300px;
  width: 300px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  position: sticky;
  top: 0;
  background: grey;
  white-space: nowrap;
}

.content-cell {
  width: 400px;
  background: teal;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Test Text very looooooooooooooooooooooooooooooong</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="content-cell">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
          eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
          nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
          ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
          nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
          exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </tbody>
  </table>
</div>

方法2：用Grid布局强制表头和内容同宽 #

给容器添加display: grid，让表头和内容共享同一列宽度，表头会自动适配内容撑开的滚动宽度，无需修改HTML结构：

.container {
  overflow: auto;
  height: 300px;
  width: 300px;
  display: grid; /* 关键属性 */
}

.header {
  position: sticky;
  top: 0;
  background: grey;
  white-space: nowrap;
}

.content {
  width: 400px;
  background: teal;
}

方法3：JavaScript同步宽度（兼容旧环境） #

如果CSS方案不适用，可通过JS同步表头与内容的实际宽度，处理窗口 resize 和滚动场景：

.container {
  overflow: auto;
  height: 300px;
  width: 300px;
}

.header {
  position: sticky;
  top: 0;
  background: grey;
  white-space: nowrap;
  width: fit-content; /* 让表头宽度自适应内容 */
}

.content {
  width: 400px;
  background: teal;
}

const container = document.querySelector('.container');
const header = document.querySelector('.header');
const content = document.querySelector('.content');

// 初始化宽度
header.style.width = `${content.offsetWidth}px`;

// 监听窗口 resize，同步宽度
window.addEventListener('resize', () => {
  header.style.width = `${content.offsetWidth}px`;
});

内容的提问来源于stack exchange，提问作者René Martin