基于Div的表格实现表头固定：滚动时表头不滚动且避免单元格错位

我之前也碰到过一模一样的Div表格表头固定错位的情况，核心原因几乎都是表头和表体的列宽没有同步对齐——尤其是用普通fixed定位或者没统一布局方式的时候。试试下面这个方案，能完美解决错位问题：

第一步：确认HTML结构（保证表头表体单元格一一对应） #

先补全你代码里的省略部分，确保结构是这样的：

<div class="divTable">
  <!-- 表头区域 -->
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">用户ID</div>
      <div class="divTableHead">用户名</div>
      <div class="divTableHead">注册时间</div>
    </div>
  </div>
  <!-- 表体滚动区域 -->
  <div class="divTableBody">
    <!-- 循环渲染的行 -->
    <div class="divTableRow">
      <div class="divTableCell">1001</div>
      <div class="divTableCell">张三</div>
      <div class="divTableCell">2024-01-01</div>
    </div>
    <!-- 更多循环行... -->
  </div>
</div>

第二步：用Flex+Sticky实现固定表头且对齐 #

下面的CSS是关键，重点解决列宽同步和表头固定：

/* 外层容器：相对定位，控制整体宽度 */
.divTable {
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  border-bottom: none; /* 表体已有边框，避免重复 */
}

/* 表头：Sticky固定在顶部，背景色覆盖下方内容 */
.divTableHeading {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  z-index: 10; /* 确保表头在内容上方 */
}

/* 统一行布局：用Flex让列自动对齐 */
.divTableRow {
  display: flex;
  width: 100%;
}

/* 表头和表体单元格：统一宽度规则，从根源避免错位 */
.divTableHead, .divTableCell {
  flex: 1; /* 默认平均分配宽度 */
  padding: 10px 12px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box; /* 核心！内边距/边框不额外撑开宽度 */
}

/* 最后一列去掉右边框，避免多余线条 */
.divTableHead:last-child, .divTableCell:last-child {
  border-right: none;
}

/* 表体区域：设置最大高度，超出自动滚动 */
.divTableBody {
  max-height: 400px; /* 按需调整滚动区域高度 */
  overflow-y: auto;
}

自定义列宽的方法 #

如果需要某几列固定宽度，只需要给对应位置的表头和表体单元格设置flex固定值即可，比如：

/* 第一列固定120px，第二列占2份宽度，第三列占1份 */
.divTableHead:nth-child(1), .divTableCell:nth-child(1) {
  flex: 0 0 120px;
}
.divTableHead:nth-child(2), .divTableCell:nth-child(2) {
  flex: 2;
}
.divTableHead:nth-child(3), .divTableCell:nth-child(3) {
  flex: 1;
}

为什么之前的方案会错位？ #

• 用fixed定位时，表头会脱离文档流，宽度无法和表体同步，自然列宽不匹配
• 没加box-sizing: border-box的话，单元格的内边距和边框会额外撑开宽度，导致表头表体实际宽度不一致
• 布局方式不统一（比如表头用float，表体用block），也会直接导致列对齐失效

这个方案我自己一直在用，亲测不会出现错位，你可以直接套用试试！

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