Angular 使用带flex的粘性柱的有角度的6垫工作台不起作用

我用的是角度7，材质7

我正在尝试对特定列使用sticky，但它不起作用

标题变粘了，但单元格没有

我的html如下所示：

<mat-table [dataSource]="dataSourceVaccinations" matSort>
  <ng-container matColumnDef="Gender" sticky>
     <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
          <img [attr.src]="getGenderIcon(Gender)" />
        </mat-cell>
     </ng-container>
     <ng-container matColumnDef="IdentityNumber" sticky>
       <mat-header-cell *matHeaderCellDef mat-sort-header> מס' זהות </mat-header-cell>
         <mat-cell *matCellDef="let GetSummaryRecordsVaccinations" > {{IdentityNumber}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="CodeVaccinationsAllowed">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ניתן לחסן סיכום </mat-header-cell>
              <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <img [attr.src]="getIcon(CodeVaccinationsAllowed)"/> </mat-cell>
     </ng-container>
     <ng-container matColumnDef="שפעת">
        <mat-header-cell *matHeaderCellDef> שפעת </mat-header-cell>
              <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <div class="center">{{ClassDescription}}
                  <br/>{{VaccinationDate | date:'dd/MM/yyyy'}}
                </div>
              </mat-cell>
      </ng-container>
      <mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns; sticky:true"></mat-header-row>
            <mat-row class="mat-row-vaccination" *matRowDef="let row; columns: displayedVaccinationsAllColumns;" (click)="selection.select(row)"></mat-row>
  </mat-table>

---

有什么办法解决这个问题吗？

我终于解决了这个问题

材料设计在版本

7.1.1

中更改

为了使用粘性列，您需要使用

标记而不是

和

，

而不是

和

这就是我的桌子现在的样子：

<table mat-table [dataSource]="dataSourceVaccinations" matSort>
  <ng-container matColumnDef="Gender" sticky>
     <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
        <td mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
          <img [attr.src]="getGenderIcon(Gender)" />
        </td>
     </ng-container>
     <ng-container matColumnDef="IdentityNumber" sticky>
       <th mat-header-cell *matHeaderCellDef mat-sort-header> מס' זהות </th>
         <td mat-cell *matCellDef="let GetSummaryRecordsVaccinations" > {{IdentityNumber}} </td>
     </ng-container>
     <ng-container matColumnDef="CodeVaccinationsAllowed">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ניתן לחסן סיכום </th>
              <td *matCellDef="let GetSummaryRecordsVaccinations">
                <img [attr.src]="getIcon(CodeVaccinationsAllowed)"/> </td>
     </ng-container>
     <ng-container matColumnDef="שפעת">
        <th mat-header-cell *matHeaderCellDef> שפעת </th>
              <td mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <div class="center">{{ClassDescription}}
                  <br/>{{VaccinationDate | date:'dd/MM/yyyy'}}
                </div>
              </td>
      </ng-container>
      <tr mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns; sticky:true"></tr>
            <tr mat-row class="mat-row-vaccination" *matRowDef="let row; columns: displayedVaccinationsAllColumns;" (click)="selection.select(row)"></tr>
  </table>

מס' זהות 
{{IdentityNumber}
ניתן לחסן סיכום 
שפעת 
{{ClassDescription}}

{{接种日期|日期：'dd/MM/yyyy'}

如果我们对表格宽度进行一些更改，则角度材质将不起作用，因此基本上我使用此css使所有列具有相同的宽度

.mat-header-cell, .mat-footer-cell, .mat-cell {
  min-width: 100px;
  box-sizing: border-box;
  text-align: center;

}

---

现在它在thaks起作用了

hy，我想问一下，当有两个列需要粘性时，粘性列会发生什么情况？桌子弄乱了吗？不，我做了，它工作得很好，你用的是哪种浏览器和什么版本？为什么我想是有一些东西和列的宽度有关

.mat-header-cell, .mat-footer-cell, .mat-cell {
  min-width: 100px;
  box-sizing: border-box;
  text-align: center;

}