Angular ng2-smart-table粘性表头与水平滚动条兼容问题

解决方案：匹配滚动上下文 + 正确配置sticky层级 #

这个问题的核心在于sticky定位的生效依赖于正确的滚动上下文：当你给外层div加overflow-x:scroll时，ng2-smart-table内部的表格元素和这个外层容器的滚动上下文不匹配，导致sticky失效；而单独设置sticky时，表格没有被一个触发overflow的容器包裹，所以浏览器不会显示滚动条，只能通过触控板的惯性滚动。

接下来是具体的修复步骤和代码：

1. 调整滚动容器到ng2-smart-table的内部容器
   ng2-smart-table默认会把表格包裹在.ng2-smart-table-container里，我们需要让这个容器成为滚动上下文的载体，而不是自己加的外层div。

2. 同时配置表头和第一列的sticky定位
   如果需要表头顶部粘性+第一列左侧粘性，要分别给表头th和数据td设置对应的sticky属性，还要通过z-index控制层级避免遮挡。

修改后的样式代码：

/* 让ng2-smart-table的内部容器成为滚动容器 */
:host /deep/ .ng2-smart-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 80vh; /* 可选：限制表格高度，触发垂直滚动时表头依然粘性 */
}

/* 表头行粘性顶部 */
:host /deep/ ng2-smart-table table thead tr th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
  border-bottom: solid 1px #f4f2f0;
  box-shadow: 0 2px 2px -1px rgba(245,241,241,1);
}

/* 第一列（表头+数据列）粘性左侧 */
:host /deep/ ng2-smart-table table thead tr th:first-child,
:host /deep/ ng2-smart-table table tbody tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 3; /* 层级高于表头，避免滚动时被表头遮挡 */
  background: white !important;
  border-right: solid 1px #f4f2f0;
  box-shadow: 2px 0 2px -1px rgba(245,241,241,1);
}

模板部分可以保留你原来的外层div（用来处理加载遮罩），但不需要给它设置overflow-x:scroll了：

<div class="table-flow" [ngClass]="{ 'disable-cover': mainTableLoading }" >
  <ng2-smart-table *ngIf="showMainTable" 
                   [settings]="settings" 
                   [source]="localDataSource" 
                   (edit)="rowEdited($event, 'edit')" 
                   (editConfirm)="rowEdited($event, 'editConfirm')">
  </ng2-smart-table>
</div>

关键原理说明 #

• 滚动上下文匹配：sticky元素的父级（或祖先级）容器必须设置overflow:auto/scroll，并且这个容器是实际产生滚动的元素。把滚动容器设置为.ng2-smart-table-container，让表格和滚动容器处于同一个上下文，sticky定位才能正常生效。
• 层级控制：通过z-index确保第一列的粘性元素不会被表头遮挡，同时背景色设置为白色，避免滚动时下方内容透显。
• 避免冲突：不要在多个嵌套容器上同时设置overflow，否则会导致滚动上下文混乱，sticky失效。

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