CSS表格固定列实现：现有HTML结构下fixedCells列固定其余列可滚动是否可行

你给出的现有HTML和CSS结构无法直接实现固定列效果，存在多个影响功能的错误，调整后可以实现需求，具体问题和修改方案如下：

现有代码的核心问题 #

• 类名不匹配：HTML中的滚动容器类名为table-content，CSS中写的是.tableContent，导致滚动容器基础样式完全不生效
• sticky定位失效：position: sticky要求最近的可滚动父级不能设置overflow: hidden，你给.content-wrapper加了overflow: hidden且设为absolute定位，直接导致fixedCells的sticky属性无效
• fixedCells宽度错误：需要固定的是前两列总宽200px，现有代码设为400px和行宽一致，完全起不到固定列的效果
• 选择器语法错误：.cell11, cell21等类选择器中，第二个类名前缺少.，对应单元格的left定位样式不生效
• Y轴滚动失效：所有行都设为absolute定位，不会撑起父容器高度，导致table-content的Y轴滚动无法触发

修复后的可实现需求的CSS代码 #

/* 修正类名匹配HTML的table-content */
.table-content {
   position: absolute;
   top: 30px;
   border: 1px solid #DDD;
   height: 100px;
   width : 300px;
   overflow: scroll;
}

.content-wrapper {
    /* 移除overflow:hidden和absolute定位，让sticky可以正常生效 */
    width: 400px;
}

.row1, .row2 {
   /* 移除absolute定位，改为相对定位撑高容器，内部单元格用absolute定位 */
   position: relative;
   height: 25px;
   width: 400px;
}

.fixedCells {
   position: sticky;
   z-index: 10;
   left: 0px;
   /* 修正宽度为前两列总宽200px */
   width: 200px;
   height: 25px;
   /* 加个背景色避免滚动时后面的单元格透上来 */
   background: #fff;
}

.cell {
    width: 100px;
    position: absolute;
    top: 0px;
    height: 25px;
    box-sizing: border-box;
    border: 1px solid #eee;
}

/* 修正类选择器缺失的. */
.cell11, .cell21{
   left: 0px;
}
.cell12, .cell22{
   left: 100px;
}
.cell13, .cell23{
   left: 200px;
}
.cell14, .cell24{
   left: 300px
}

修复后即可实现你要的效果：.table-content容器支持XY双向滚动，.fixedCells包裹的前两列会固定在左侧，横向滚动时不会随其余列移动，纵向滚动时固定列会和对应行同步移动。

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