如何为Angular Material表格首列添加滚动时不消失的投影效果？

你遇到的问题是两个常见原因导致的：

1. 粘性列的z-index低于普通列，阴影和边框被右侧滚动过来的列覆盖
2. 只给单元格td加了样式，未给表头th加对应样式，且缺少背景色设置导致内容穿透

第一步：调整HTML代码 #

给sticky列的表头th也添加column-shadow类：

<!-- action buttons -->
<ng-container matColumnDef="select" sticky>
  <th mat-header-cell *matHeaderCellDef class="column-shadow">
    Action
  </th>
  <td
    [ngClass]="'column-shadow'"
    mat-cell
    *matCellDef="let row; let index = index"
  >
    <!-- 原有内容不变 -->
    <mat-checkbox
      color="primary"
      (click)="$event.stopPropagation()"
      (change)="selectRecord($event.checked, index)"
      [checked]="selection.isSelected(row)"
      [aria-label]="checkboxLabel(row)"
    >
    </mat-checkbox>

    <span class="delete-edit-row">
      <a
        class="action-button"
        mat-button
        (click)="deleteSingleRecord(index)"
        ><img
          class="close-button-image"
          src="../../../assets/images/trashgrid.svg"
      /></a>
    </span>
  </td>
</ng-container>

第二步：调整CSS代码 #

修改样式，增加z-index、背景色，优化阴影参数：
如果样式写在组件样式文件中，需要加::ng-deep前缀穿透视图封装：

::ng-deep .column-shadow {
  position: sticky;
  left: 0;
  z-index: 2 !important;
  border-right: 1px solid $af-pinkish-grey !important;
  /* 仅保留右侧阴影，避免上下阴影干扰 */
  box-shadow: 2px 0 4px rgba(68, 68, 68, 0.3) !important;
  /* 必须设置和表格背景一致的背景色，避免右侧列内容穿透 */
  background-color: #fff !important;
}

如果把这段样式放到全局styles.scss文件中，可以去掉::ng-deep前缀。

修改后横向滚动表格时，第一列会保持粘性，阴影和边框始终显示不会被覆盖。

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