Angular Material 2中mat-table横向滚动时固定单列的实现方法

当然可以实现这个需求！我之前在项目里也碰到过类似场景，给你分享两种实用的方案，完美适配你用的Angular 5和Angular Material 2版本：

方案一：CSS Sticky定位（最简单高效） #

这是最直接的实现方式，利用CSS的sticky属性让指定列固定在左侧，横向滚动时保持不动。步骤很清晰：

1. 给表格套滚动容器：把mat-table放在一个带横向滚动的容器里，确保滚动行为只作用于这个容器
2. 给固定列加自定义类：需要固定的表头单元格（mat-header-cell）和数据单元格（mat-cell）都加上同一个类，比如fixed-column
3. 写CSS样式锁定位置：通过定位和层级设置，让固定列始终留在左侧且不被其他内容遮挡

代码示例 #

HTML 模板

<div class="table-scroll-container">
  <mat-table [dataSource]="dataSource">
    <!-- 固定列：ID列 -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef class="fixed-column">ID</mat-header-cell>
      <mat-cell *matCellDef="let item" class="fixed-column">{{item.id}}</mat-cell>
    </ng-container>

    <!-- 其他可滚动列 -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>姓名</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef>邮箱</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.email}}</mat-cell>
    </ng-container>
    <!-- 更多列... -->

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

CSS 样式

.table-scroll-container {
  overflow-x: auto;
  max-width: 100%; /* 限制容器宽度，触发横向滚动 */
}

.fixed-column {
  position: sticky;
  left: 0;
  background-color: #ffffff; /* 和表格背景色一致，防止滚动时被后面内容遮挡 */
  z-index: 10; /* 确保固定列在其他单元格上方 */
  min-width: 80px; /* 给固定列设置最小宽度，避免内容挤压 */
}

/* 可选：给表头固定列加边框，区分视觉 */
.fixed-column.mat-header-cell {
  border-right: 1px solid #e0e0e0;
}

方案二：自定义滚动监听（复杂场景备选） #

如果CSS sticky在你的场景中出现样式冲突（比如Angular Material的flex布局影响），可以通过监听滚动事件手动调整固定列位置：

1. 给固定列设置position: absolute
2. 在组件中监听容器的滚动事件，获取滚动距离，动态设置固定列的left值
3. 注意处理表头和数据行的同步对齐

不过这个方法需要更多代码维护，除非CSS方案完全不生效，否则优先用方案一。

注意事项 #

• 确保滚动容器是mat-table的直接父元素，不要让滚动行为发生在更高层级的容器上，否则sticky定位会失效
• 固定列的背景色必须设置，否则滚动时后面的内容会透过来
• 如果使用Angular Material的主题样式，可能需要调整选择器优先级，比如用.mat-cell.fixed-column这样的复合选择器

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