如何不使用HTML表格，用CSS Grid实现类似Excel冻结窗格的可交互数据网格

该需求完全可以脱离HTML表格实现，优先推荐CSS Grid结合position: sticky的原生方案，实现逻辑简单且完全兼容交互需求。

核心实现步骤 #

• 定义网格滚动容器：设置固定宽高，开启滚动权限，用CSS Grid属性统一声明所有行高、列宽

  .grid-wrapper {
    width: 800px;
    height: 600px;
    overflow: auto;
    display: grid;
    /* 第一列固定120px，后续列宽可根据实际需求调整 */
    grid-template-columns: 120px repeat(20, 100px);
    /* 第一行固定50px，后续行高可根据实际需求调整 */
    grid-template-rows: 50px repeat(50, 40px);
  }
  

• 给首行所有单元格添加sticky定位，固定在容器顶部，设置z-index: 2避免被下方内容遮挡
• 给首列所有单元格添加sticky定位，固定在容器左侧，设置z-index: 1避免被右侧内容遮挡
• 单独给首行首列交叉的单元格设置z-index: 3，确保横竖滚动时都不会被其他单元格覆盖

  .grid-cell {
    border: 1px solid #eee;
    background: #fff;
  }
  .grid-cell--header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .grid-cell--fixed-col {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .grid-cell--header:first-child {
    z-index: 3;
  }
  

交互与性能适配 #

• 所有单元格均为真实DOM节点，sticky定位不会影响事件绑定，点击、拖拽功能可以直接按常规逻辑实现
• 数据体量极大的场景可以搭配虚拟滚动优化：仅渲染可视区域内的单元格，滚动时动态替换节点内容，CSS Grid布局可以完美适配虚拟滚动逻辑，不会出现错位问题

低版本兼容备选方案 #

如果需要兼容不支持position: sticky的旧浏览器，可以用位移方案实现：

• 外层设置固定宽高的可视窗口，overflow: hidden
• 内层放置完整Grid网格，监听自定义滚动条的滚动事件，通过transform: translate(x, y)动态调整内层网格的偏移量
• 首行、首列单独提取为独立的Grid层，固定在可视窗口的顶部、左侧，滚动时同步更新首行的水平偏移、首列的垂直偏移即可
  该方案同样完全不需要HTML表格标签，性能和原生sticky方案持平。

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