时间戳

首页 > 解决方案 > 如何固定 mat-cell 的高度并将其设置为溢出？

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

问题描述

我创建了一个带有这样一列的 mat 表：

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

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

https://i.stack.imgur.com/cR3C3.png

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

我怎样才能做到？

标签： cssangularmat-table

解决方案

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

推荐阅读