时间戳

首页 > 解决方案 > 突出显示垫行单元格的全宽

html - 突出显示垫行单元格的全宽

问题描述

当我想在 Angular 中突出显示一行时遇到问题。HighLight 有效，但不适用于全宽。实际结果：https ://prnt.sc/u4rqjl

我不明白为什么它不是全宽.. Angular 版本：10

我只是看到我这里有问题！：https ://prnt.sc/u4s4tu

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>

CSS文件：

.mat-row, .mat-header-row {
  min-width: 1123px;
  width:100%;
}


.mat-table {
  position:relative;
  overflow: auto;
  max-height: 500px;
  width:100%;
  height : 100vh;
}
// The table has a scrollbar on the bottom ( because i have a lot of column)
.highlight{
  background: #00695c;
}

ts文件：

selectedRowIndex: number = -1;
highlight(row): void {
    this.selectedRowIndex = row.id;
}

标签： htmlcssangularangular-material

解决方案

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

你可能会使用这个：

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

解决方案只是删除它们。在大屏幕上，你的表格看起来不错，在小屏幕上，你的画会有一个滚动条。

推荐阅读