如何固定mat-cell的高度并设置溢出？

Question

我用这样的列创建了一个垫子表：

<div class='table-container mat-elevation-z8'>
<table mat-table [dataSource]="dataSource">

<!-- Position Column -->
  <ng-container matColumnDef="summary">
    <th mat-header-cell *matHeaderCellDef> Summary </th>
    <td mat-cell *matCellDef="let element" [innerHTML]  ='element.summary'></td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

然后我像这样输入css：

.mat-row{
    white-space:nowrap;
  height:48px;
  max-height:48px;
    overflow: hidden;
  overflow-y:hidden;
    text-overflow: hidden;
}
.mat-cell{
  white-space:nowrap;
  height:48px;
  max-height:48px;
  overflow: hidden;
  overflow-y:hidden;
  text-overflow: hidden;
}

但是高度和溢出没有起作用，行高仍然由身体自动增长：

我确实尝试了:: ng-deep和！important，但仍然无法正常工作

我该怎么做？

Answer 1

由于td属性是不是block的表单元格，因此您不能使其滚动替代解决方案，因为您需要使用div将信息包装在某些overflow :auto中并将其放在td中，然后div可以滚动

就像您的.ts

HTML

<div class='data-wrap'>
Some data
</div>

CSS

.data-wrap{
  white-space:nowrap;
  height:48px;
  max-height:48px;
  overflow: hidden;
  overflow-y:hidden;
  text-overflow: hidden;
}