Как исправить высоту мат-ячейки и установить ее переполнение?

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 и! Важно, но все еще не работает

Как я могу сделатьэто?

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;
}