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

這將使事務池占用網格內的所有空間。

其余樣式由您決定。