Angular 7材料数据表列的宽度和对齐方式

Question

我有一个网格布局。在右上方的网格中，我想显示一个动态数据表。

问题：我希望数据表在网格顶部对齐。现在不在中间。另一件事是，我想将表格宽度设置为与网格宽度一样宽。

我玩了一点CSS，但是显然我找不到正确的CSS属性，或者我还缺少其他东西。

Stackblitz：https://stackblitz.com/edit/angular-r3a8tt

CSS：

.example-container {
  height: 100%;
  width: 100%;
  overflow: auto;
}

table {
  width: 125%;
}

HTML：

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

    <ng-container matColumnDef="sender">
      <th mat-header-cell *matHeaderCellDef> Sender </th>
      <td mat-cell *matCellDef="let element"> {{element.sender}} </td>
    </ng-container>

    <ng-container matColumnDef="recipient">
      <th mat-header-cell *matHeaderCellDef> Empfänger </th>
      <td mat-cell *matCellDef="let element"> {{element.recipient}} </td>
    </ng-container>

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> Betrag </th>
      <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
    </ng-container>

    <ng-container matColumnDef="charges">
      <th mat-header-cell *matHeaderCellDef> Gebühr </th>
      <td mat-cell *matCellDef="let element"> {{element.charges}} </td>
    </ng-container>

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

Answer 1

在grid-layout.component.scss中，您需要设置子组件的高度和宽度，以使transaction-pool.component.css中的百分比能够完成您想要的操作。

在grid-layout.scss内

app-transaction-pool {
  height: 100%;
  width: 100%;
}

这将使事务池占用网格内的所有空间。

其余样式由您决定。