Flexbox构建粘性行列表格遇样式失效与粘性列消失问题求助

我尝试用Flexbox构建带粘性表头和首列的表格，当前代码如下：

原CSS代码 #

.container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 200px;
  height: 200px;
}

.sticky-row,
.row {
  display: flex;
  flex-direction: row;
}

.sticky-row {
  position: sticky;
  background-color: aqua;
  top: 0;
}

.sticky-cell {
  position: sticky;
  background-color: aqua;
  left: 0;
}

原HTML代码 #

<div class="container">
  <div class="sticky-row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
  <div class="row">
    <div class="sticky-cell">sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
    <div>not sticky-cell</div>
  </div>
</div>

遇到的问题：

• 水平滚动前，超出容器宽度的单元格样式未正常显示
• 水平滚动距离过大时，粘性首列会消失

解决方案 #

通过调整滚动容器结构、固定单元格宽度、修正粘性定位上下文来解决问题，修改后的代码如下：

修改后的CSS代码

.container {
  /* 仅负责垂直滚动 */
  overflow-y: auto;
  width: 200px;
  height: 200px;
}

.scroll-x {
  /* 负责水平滚动，所有行统一在此容器内 */
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.sticky-row,
.row {
  display: flex;
  flex-direction: row;
}

.sticky-row {
  position: sticky;
  background-color: aqua;
  top: 0;
  z-index: 2; /* 避免被下方行遮挡 */
}

/* 给所有单元格设置固定宽度，防止挤压 */
.cell, .sticky-cell {
  width: 80px;
  padding: 4px;
  border: 1px solid #ddd;
}

.sticky-cell {
  position: sticky;
  background-color: aqua;
  left: 0;
  z-index: 1; /* 避免被右侧单元格遮挡 */
}

修改后的HTML代码

<div class="container">
  <div class="scroll-x">
    <div class="sticky-row">
      <div class="sticky-cell">sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
    </div>
    <div class="row">
      <div class="sticky-cell">sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
    </div>
    <div class="row">
      <div class="sticky-cell">sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
    </div>
    <div class="row">
      <div class="sticky-cell">sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
    </div>
    <div class="row">
      <div class="sticky-cell">sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
      <div class="cell">not sticky-cell</div>
    </div>
  </div>
</div>

关键修改说明 #

1. 拆分滚动容器：将垂直滚动和水平滚动分离，外层container管垂直滚动，内层scroll-x管水平滚动，确保所有行处于同一水平上下文，解决粘性列滚动消失的问题。
2. 固定单元格宽度：避免未滚动时单元格被挤压，保证所有单元格样式正常显示。
3. 修正粘性定位上下文：
   • 粘性表头的top:0相对于垂直滚动的container，始终固定在顶部
   • 粘性首列的left:0相对于水平滚动的scroll-x，滚动时不会随父行偏移
4. 添加层级控制：通过z-index确保粘性元素不会被其他单元格遮挡。

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