Angular Material Table单元格：在内容下方显示第一张图片，所有内容都在下方的一栏中

Question

我创建了一个包含三列的材料表：标题，正文和图像。现在，我想更改其结构，因为我想在下面的一栏中显示所有内容，但我不知道如何执行此操作。

这是我当前的代码，它将每个值显示在另一个值旁边的新列中，而不是显示在其他内容的下面。这是我的HTML文件：

<div class="example-container mat-elevation-z8">

<ng-container matColumnDef="Title">
  <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
</ng-container>

<!-- Age Column -->
<ng-container matColumnDef="Body">
  <mat-header-cell *matHeaderCellDef> Body</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.body}} </mat-cell>

</ng-container>

<!-- Grade Column -->
<ng-container matColumnDef="ImageUrl" >
  <th mat-header-cell *matHeaderCellDef> ImageUrl</th>
  <td mat-cell *matCellDef="let element"> <img [src]="element.imageUrl" width=100% height="400" /> </td>
</ng-container>


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