使用rowspan属性时HTML表格固定首列效果失效问题

给首列单元格设置display: block是导致rowspan属性失效的核心原因。表格单元格默认显示模式为table-cell，强制修改为块级元素后，会彻底破坏表格原生的行列合并计算逻辑，设置了rowspan跨多行的单元格无法自动匹配对应行高，最终出现布局错位、固定效果失效的问题。

使用CSS原生position: sticky实现首列固定，无需监听滚动事件，完美兼容rowspan/colspan属性，同时支持自由设置各列宽度。 #

调整后的CSS代码 #

table {
  border: 1px solid black;
  border-collapse: collapse; /* 合并边框避免滚动出现间隙 */
}

/* 普通单元格样式，可按需给不同列设置不同宽度 */
table td {
  border: 1px solid red;
  background: lightpink;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  height: 20px;
}

/* 首列固定样式 */
table td.first {
  border: 1px solid blue;
  background: lightblue;
  position: sticky;
  left: 0; /* 固定在容器最左侧 */
  z-index: 1; /* 保证滚动时首列覆盖在其他单元格上层 */
  width: 300px; /* 首列自定义宽度 */
  min-width: 300px;
  max-width: 300px;
}

/* 滚动容器设置 */
table tbody {
  display: block;
  overflow: auto;
  width: 500px;
}

JS调整 #

原有监听滚动设置left值的逻辑可以全部删除，sticky定位会自动跟随滚动保持固定位置，性能比手动监听scroll更好。

关键注意点 #

• 不要修改td元素的默认display属性，保持table-cell才能让rowspan的跨行列计算正常生效
• 必须添加border-collapse: collapse，否则滚动时首列和后续单元格之间会出现边框缝隙
• 如果需要同时固定表头，给表头th元素添加position: sticky; top: 0即可实现双向固定

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