我的angular-material card
里面有mat-table
,其中包含备注。
下面的HTML和CSS
<div fxLayout="column" style="flex: 1;">
<mat-card class="card-info" style="margin-right: 10px; max-height: 167px;">
<mat-card-content>
<div class="example-container">
<mat-table #table [dataSource]="notes">
<!-- Name Column -->
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.created | date }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="subject">
<mat-header-cell *matHeaderCellDef> Subject </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.subject}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef> Note </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</mat-card-content>
</mat-card>
</div>
CSS:
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
mat-header-cell, mat-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
尽管单元格内的文本会截断,但它并没有截断,导致卡片增长。我不想放置最大宽度,因为我希望它可以弯曲以填充屏幕的其余部分。
以下是它的外观图像:
正如你所看到的那样,它会让卡片从屏幕上消失。