如何解决表格粘性表头（Sticky Header）滚动数据时的上移跳动问题

我帮你排查了代码里的问题，这个跳动现象主要是因为你把<thead>和<tbody tr>都设置成了display: table，这会让表头和表格主体变成两个独立的块级表格元素，当滚动tbody时，sticky定位的计算会出现偏差，导致表头出现上移跳动的情况。

下面是修复后的方案，核心是恢复表格的正常结构，让thead和tbody属于同一个table容器，再通过合理的滚动设置实现稳定的粘性表头：

修改后的CSS代码 #

.outside-container { 
  display: flex; 
  height: 300px; 
}
.inside-left { 
  flex: 1; 
  background-color: peachpuff; 
  padding: 30px; 
}
.inside-right { 
  flex: 1; 
  background-color: dodgerblue; 
}
.table-container { 
  height: 100%; 
  border: 1px solid red; 
  overflow: hidden; /* 隐藏外层滚动，让tbody单独滚动 */
}
table {
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免表头和内容列宽不一致 */
  border-collapse: collapse; /* 合并边框，让表头和内容衔接更自然 */
}
thead th {
  position: sticky; 
  top: 0; 
  z-index: 1; 
  background-color: palegreen; 
  border-bottom: 1px solid #ccc; /* 可选：添加边框区分表头和内容 */
}
tbody {
  display: block; /* 让tbody可以设置滚动 */
  height: calc(100% - 40px); /* 减去表头高度，根据实际情况调整数值 */
  overflow-y: auto; 
}
tbody tr {
  display: table-row; /* 恢复行的默认显示方式 */
}
th, td {
  text-align: left;
  padding: 8px; /* 可选：添加内边距优化排版 */
}

关键修改点说明 #

• 移除了thead, tbody tr { display: table; }的设置，让thead和tbody归属于同一个table结构，避免独立块级元素导致的定位偏差
• 给table添加border-collapse: collapse，确保表头和内容的边框衔接自然，不会出现间隙
• 将tbody设置为display: block并指定高度，让tbody单独滚动，外层.table-container仅负责包裹表格
• 用calc(100% - 表头高度)调整tbody的高度，确保滚动区域刚好适配剩余空间，避免表头被遮挡或出现多余滚动

修改后再滚动表格内容，表头就会稳定固定在顶部，不会出现上移跳动的问题了。

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