为何表格设置position: sticky的thead会出现异常间隙？

核心问题原因 #

Chrome和Safari在column-reverse布局的flex容器内，对<thead>（table-header-group类型元素）的sticky渲染存在兼容性冲突，导致表头与表格顶部/底部出现无法消除的间隙。

解决方案 #

移除<thead>的position: sticky设置，转而直接为每个<th>单元格配置粘性定位，同时调整布局细节避免冲突：

修改后的CSS代码 #

/* article table styling: */
.disc-story-article figure.table {
  display: flex;
  flex-direction: column-reverse;
  max-width: 98%;
  max-height: 80vh;
  overflow: scroll;
  margin: 0;
  border: 0.22rem solid var(--primary-color);
  border-radius: 1rem;
  /* 确保表格在滚动容器顶部对齐 */
  justify-content: flex-end;
}

/* article table overall styling */
.disc-story-article figure.table table {
  border-spacing: 0;
  /* 防止表格被flex布局压缩 */
  flex-shrink: 0;
  width: 100%;
}

/* article table caption styling */
.disc-story-article figure.table figcaption {
  display: flex;
  align-self: center;
  padding: 0.5rem 0;
}

/* 替换thead的sticky设置，直接给th配置粘性定位 */
.disc-story-article table th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* 不透明背景覆盖下方内容，避免间隙透出 */
  background-color: var(--secondary-color);
  color: var(--background);
}

/* article table right-most column cell styling */
.disc-story-article table tr td:nth-last-child(1),
.disc-story-article table tr th:nth-last-child(1) {
  border-right-width: 0 !important;
}

/* article table bottom-most row cell styling */
.disc-story-article table tr:nth-last-child(1) td {
  border-bottom-width: 0 !important;
}

/* article table general cell styling: */
.disc-story-article table td,
.disc-story-article table th {
  border-top: none !important;
  border-left: none !important;
  border-right: 0.12rem solid var(--primary-color) !important;
  border-bottom: 0.12rem solid var(--primary-color) !important;
  padding: 1rem;
}

关键调整点 #

1. 将sticky定位从<thead>转移到<th>：避开table-header-group在flex容器中的布局冲突，直接针对单元格定位更可靠
2. 添加z-index:1：确保滚动时表头覆盖tbody内容
3. 设置不透明背景色：防止间隙透出下方内容
4. 调整flex容器对齐方式：确保表格在滚动容器顶部正确布局，避免额外偏移

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