css - 如何固定 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;
}