angular - 在标题行之后的角度材料表中将页脚放在顶部而不是底部

Question

我想将页脚放在标题行之后的材料表中。我尝试了使用 CSS 的不同方法，但没有成功。下面是我的HTML：

  <div class="table-wrapper">
    <div class="table-container">
      <table mat-table #table [dataSource]="dataSource" matSort>
        <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ columnHeading[col] }}</th>
          <td mat-footer-cell *matFooterCellDef>
            <ng-container *ngIf="col == 'totalQty'">{{ totalQty }}</ng-container>
            <ng-container *ngIf="col == 'totalPrice'">
              <div class="grid grid-rows-3 grid-flow-col">
                <div>Bill Total =</div>
                <div>Discount =</div>
                <div>Total Amount =</div>
                <div class="inline-flex float-right">{{ totalPrice }}</div>
                <div class="inline-flex float-right">- {{ totalDiscount }}</div>
                <div class="inline-flex float-right">{{ receivableAmount }}</div>
              </div>
            </ng-container>
          </td>
          <td mat-cell *matCellDef="let element; let i = index">
            {{ element[col] }}
          </td>
        </ng-container>

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

标签： angularangular-materialmat-table