如何创建兼具固定列与固定表头的表格网格？

问题出在position: sticky的生效规则——sticky元素的定位容器是第一个设置了overflow（非visible）的父元素。你给#center-column加了overflow-x: scroll，导致中间列表头的sticky以这个列容器为基准，而不是外层的滚动网格，所以纵向滚动时表头没法固定在顶部。

要解决这个问题，我们需要把表头层和内容层彻底分离：外层网格分成上下两部分（表头行+内容行），表头行里包含左表头、中间表头容器、右表头；内容行里包含左内容列、可横向滚动的中间内容列、右内容列。这样：

• 纵向滚动时，表头行的所有元素可以基于外层网格设置sticky: top，不受中间列的overflow影响
• 横向滚动时，只有中间内容列设置overflow-x: scroll，左右内容列保持固定

下面是修改后的完整代码：

修改后的HTML结构 #

<div id="grid">
  <!-- 表头行 -->
  <div class="grid-header">
    <div id="left-header"></div>
    <div id="center-header"></div>
    <div id="right-header"></div>
  </div>
  <!-- 内容行 -->
  <div class="grid-content">
    <div id="left-column"></div>
    <div id="center-column"></div>
    <div id="right-column"></div>
  </div>
</div>

修改后的CSS #

.cell {
  background: #eee;
  font-family: Arial;
  border: 0.5px solid black;
  color: #333;
  height: 30px;
  display: grid;
  align-items: center;
  text-align: center;
}

#grid {
  width: min(100%, 1000px);
  max-height: 300px;
  overflow-y: auto;
  position: relative;
  border: 0.5px solid black;
}

/* 表头行布局 */
.grid-header {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  position: sticky;
  top: 0;
  z-index: 10; /* 确保表头在内容上方 */
}

/* 内容行布局 */
.grid-content {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
}

/* 中间内容列横向滚动 */
#center-column {
  overflow-x: scroll;
}

/* 中间表头和内容的内部网格 */
#center-header .inner-grid,
#center-column .inner-grid {
  display: grid;
}

/* 表头样式 */
#left-header .cell,
#right-header .cell,
#center-header .cell {
  font-weight: bold;
  background: #d70000;
  color: #eee;
}

修改后的JS（生成对应结构） #

// JS仅用于生成单元格
const cells = Array.from({ length: 20 }).map(c => `${Math.floor(Math.random() * 200) + 50}px`)
const firstColWidth = cells.shift() // 左列宽度
const lastColWidth = cells.pop()   // 右列宽度
const centerColCount = cells.length // 中间列数量

const rowCount = 100

// 获取DOM元素
const grid = document.getElementById("grid")
const leftHeader = document.getElementById("left-header")
const centerHeader = document.getElementById("center-header")
const rightHeader = document.getElementById("right-header")
const leftColumn = document.getElementById("left-column")
const centerColumn = document.getElementById("center-column")
const rightColumn = document.getElementById("right-column")

// 设置表头和内容行的网格列宽
document.querySelector('.grid-header').style.gridTemplateColumns = `${firstColWidth} 1fr ${lastColWidth}`
document.querySelector('.grid-content').style.gridTemplateColumns = `${firstColWidth} 1fr ${lastColWidth}`
// 设置中间表头和内容的内部网格列宽
const centerGridTemplate = cells.join(' ')
document.getElementById('center-header').innerHTML = `<div class="inner-grid"></div>`
document.getElementById('center-column').innerHTML = `<div class="inner-grid"></div>`
document.querySelector('#center-header .inner-grid').style.gridTemplateColumns = centerGridTemplate
document.querySelector('#center-column .inner-grid').style.gridTemplateColumns = centerGridTemplate

// 创建单元格
function makeItem(text) {
  const div = document.createElement("div")
  div.classList.add('cell')
  div.textContent = text
  return div
}

// 生成表头
leftHeader.appendChild(makeItem('First'))
rightHeader.appendChild(makeItem('Last'))
const centerHeaderGrid = document.querySelector('#center-header .inner-grid')
for(let i=1; i<=centerColCount; i++) {
  centerHeaderGrid.appendChild(makeItem(`Header ${i}`))
}

// 生成内容行
for(let row=1; row<=rowCount; row++) {
  // 左列内容
  leftColumn.appendChild(makeItem(`Row ${row}`))
  // 右列内容
  rightColumn.appendChild(makeItem(`Row ${row}`))
  // 中间列内容
  const centerRowGrid = document.createElement('div')
  centerRowGrid.classList.add('inner-grid')
  centerRowGrid.style.gridTemplateColumns = centerGridTemplate
  for(let i=1; i<=centerColCount; i++) {
    centerRowGrid.appendChild(makeItem(`Cell ${row}-${i}`))
  }
  centerColumn.appendChild(centerRowGrid)
}

关键改动说明 #

1. 拆分表头与内容：把原来的单一行结构改成表头行+内容行，表头行设置position: sticky; top: 0，直接基于外层滚动容器生效
2. 隔离横向滚动容器：仅给内容行的中间列设置overflow-x: scroll，表头行的中间列不设置overflow，保证表头的sticky不受影响
3. 层级控制：给表头行加z-index:10，确保滚动时表头不会被内容覆盖

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