Html 高亮显示垫行单元格的全宽

当我想突出显示角度方向上的行时，遇到了一个问题。 高亮显示有效，但不在全宽上。 实际结果：

我不明白为什么它不是全宽的。。 角度版本：10

我只是发现我这里有个问题！：

Html文件：

..
...



    <ng-container matColumnDef="reportdate">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Date réalisation</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.reportdate}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Action</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <button *ngIf="element.status == 'KO'" mat-icon-button color="warn">
                                <mat-icon>build</mat-icon>
                            </button>
        <button *ngIf="element.status == 'OK'" mat-icon-button color="primary">
                                <mat-icon>verified</mat-icon>
                            </button>
        <button *ngIf="element.status == 'Solved'" mat-icon-button color="accent">
                                <mat-icon>verified</mat-icon>
                            </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'highlight': selectedRowIndex == row.id}" (click)="highlight(row)"></mat-row>

    </mat-table>

Ts文件：

selectedRowIndex:number=-1；
高亮显示（行）：无效{
this.selectedRowIndex=row.id；
}

您遇到的问题通常是由于过度分配了最大宽度造成的。 这意味着您有超过可能宽度100%的列

您可能会使用以下方法：

.mat-column-$COLUMNNAME {
  flex: 0 0 X%;
}

解决办法就是删除它们。 在大屏幕上，你的桌子会很好看

---

在一个小屏幕上，你的画会有一个滚动条。

嗨，有没有可能用stackblitz light演示来检查这个问题？您好，这个小问题有太多事情要做了，我编辑了我的帖子，问题就在这里：css颜色没有问题。你能编辑你的问题的样本库吗？是的，很完美，我在我的每一个列上都使用了它！现在解决了宽度和颜色的问题；）