实现表格粘性表头时IE出现双滚动条问题求助

我之前也踩过IE表格布局的坑，你的方案在Chrome里表现完美，但IE对表格元素的visibility: collapse和inline-block的处理确实有兼容性问题，咱们来一步步修复：

问题根源 #

IE浏览器对表格的visibility: collapse属性支持不完善，当你给.headers tbody设置这个属性时，IE并没有完全忽略tbody的高度计算，导致页面整体高度被额外撑开，出现了多余的页面滚动条。另外，inline-block在IE中可能会引入一些额外的布局空白，也会干扰高度计算逻辑。

修复方案一：优化布局与表格宽度控制 #

修改你的CSS代码，替换兼容性差的属性并固定表格布局，确保表头和滚动区域的表格宽度完全一致，同时让IE正确计算页面高度：

th { border: 1px solid black; }
/* 用更兼容的方式隐藏表头表格的tbody */
.headers tbody { 
  height: 0;
  overflow: hidden;
  display: none;
}
.scrollBody thead { visibility: collapse; }
.scrollBody { 
  display: block; /* 替换inline-block，避免IE布局异常 */
  max-height: 250px; 
  overflow: auto; 
  width: 100%;
}
/* 固定表格布局，保证表头和内容列宽完全对齐 */
.headers, .scrollBody table {
  width: 100%;
  table-layout: fixed;
}

修复方案二：简化结构（可选） #

如果不想维护两个重复的表格，也可以尝试用单个表格实现粘性表头——给thead th设置position: sticky; top: 0，但注意IE完全不支持position: sticky，如果你的项目需要兼容IE，这个方案就不适用了。不过如果后续放弃IE支持，这会是更简洁的方案：

thead th {
  position: sticky;
  top: 0;
  background: white; /* 防止内容透过表头显示 */
}
.table-container {
  max-height: 250px;
  overflow: auto;
}

效果验证 #

修改后，IE应该只会显示滚动区域的滚动条，页面整体不会出现多余滚动条，同时表头和内容的列宽也能保持完美对齐。

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