本文介绍一种无需 javascript 控制、完全基于 css 的解决方案，通过 position: sticky 结合 :nth-child() 伪类选择器，实现左/右列固定（水平滚动时可见）和首行表头固定（垂直滚动时可见）的二维粘性网格布局。
本文介绍一种无需 javascript 控制、完全基于 css 的解决方案，通过 position: sticky 结合 :nth-child() 伪类选择器，实现左/右列固定（水平滚动时可见）和首行表头固定（垂直滚动时可见）的二维粘性网格布局。
在构建类似电子表格的响应式数据网格时，常需同时满足两个核心交互需求：横向滚动时冻结首尾列（如序号列、操作列），以及纵向滚动时冻结表头行。传统做法往往依赖嵌套容器 + overflow: scroll，但该方式会破坏 position: sticky 在子容器内的生效机制——正如提问者所遇问题：一旦为中间区域设置 overflow-x: scroll，其内部的 sticky 表头便失效。
幸运的是，CSS 提供了一种更优雅、更轻量的纯样式解法：放弃物理分栏结构，改用单层 Grid 布局 + 精准的伪类定位。关键在于——所有单元格统一置于同一父容器（#grid）下，通过 grid-template-columns 定义列结构，并利用 :nth-child() 精确匹配目标单元格，分别赋予 left、right 或 top 方向的 sticky 定位。
以下是一个 6 列 × 15 行的完整示例（可按需扩展）：
<div id="grid"></div>
#grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
max-height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
font-family: 'Segoe UI', Arial, sans-serif;
}
.cell {
border: 1px solid #ddd;
padding: 8px 12px;
text-align: center;
background-color: #fff;
min-width: 120px;
box-sizing: border-box;
}
/* 左侧第一列（每行第1个单元格） */
.cell:nth-child(6n - 5) {
position: sticky;
left: 0;
background-color: #f5f5f5;
z-index: 3;
border-right: 2px solid #999;
}
/* 右侧最后一列（每行第6个单元格） */
.cell:nth-child(6n) {
position: sticky;
right: 0;
background-color: #f5f5f5;
z-index: 3;
border-left: 2px solid #999;
}
/* 首行表头（前6个单元格） */
.cell:nth-child(-n + 6) {
position: sticky;
top: 0;
background-color: #4a6fa5;
color: white;
font-weight: bold;
z-index: 2;
border-bottom: 2px solid #3a5a80;
}
/* 左上角交汇单元格（第1个）——需最高层级避免被覆盖 */
.cell:nth-child(1) {
z-index: 4;
border-right: 2px solid #3a5a80;
border-bottom: 2px solid #3a5a80;
}// 仅用于动态生成单元格（非必需，可静态编写 HTML）
const grid = document.getElementById('grid');
const totalCells = 6 * 15;
for (let i = 1; i <= totalCells; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
// 首行为表头，其余为数据
if (i <= 6) {
cell.textContent = ['ID', 'Name', 'Email', 'Status', 'Date', 'Actions'][i - 1];
} else {
const row = Math.ceil(i / 6);
const col = ((i - 1) % 6) + 1;
cell.textContent = `R${row}C${col}`;
}
grid.appendChild(cell);
}✅ 核心优势与注意事项：
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 驱动：无需 JS 监听滚动或手动计算偏移，性能更高、兼容性更好（支持 Chrome 56+、Firefox 59+、Safari 15.4+）；
- 语义清晰：所有单元格平级排列，DOM 结构扁平，利于可访问性和维护；
- 灵活扩展：修改 grid-template-columns 和 :nth-child() 表达式即可适配任意列数（如 8 列 → 6n-7 和 6n 改为 8n-7 和 8n）；
- z-index 层级管理至关重要：sticky 元素需合理设置 z-index，确保左/右列不被表头遮挡，且左上角单元格始终置顶；
- 避免 overflow: hidden 父容器：sticky 要求最近的具有滚动机制的祖先（如 #grid）不能设 overflow: hidden，否则将截断粘性效果。
最终效果：用户可自由横向滚动查看中间数据列，左右冻结列始终可见；纵向滚动时，整行表头（含冻结列中的表头单元格）稳稳吸附于顶部——真正意义上达成“二维 Sticky”体验。
