将表格对齐到顶部 - Angular 表格和垫卡

Question

我正在尝试将两个表格对齐到顶部。没有成功 - 请参阅随附的屏幕截图。

Uneven tables

我尝试在每个可能的级别上使用垂直对齐 - 没有成功。

非常感谢所有想法。

我的 HTML 代码如下所示：

<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
    <div fxFlex="50">
        <mat-card style="box-shadow: none;">
...
            <mat-card-content>
                <div class="mat-elevation-z8" style="vertical-align: top;">
                    <table mat-table [dataSource]="dataCurrentAssets" style="width:100%; vertical-align: top;">

 ...
                    </table>
                </div>
            </mat-card-content>
        </mat-card> 
    </div>
    <div fxFlex="50" style="vertical-align: top;">
        <mat-card style="box-shadow: none;vertical-align: top;">
...
            <mat-card-content style="vertical-align: top;">
                <div class="mat-elevation-z8" style="vertical-align: top;">
                    <table mat-table [dataSource]="dataCurrentLiabilities" style="width:100%;vertical-align: top;">

...
                    </table>
                </div>
            </mat-card-content>
        </mat-card> 
    </div>
</div>

Answer 1

尝试 fxLayoutAlign 和 start

<div fxLayout="row" fxLayoutAlign="space-around start" >

见Layout Demos

Answer 2

这个问题出在你提供的对齐方式上。将 "center" 替换为 "start"。请使用下面的行（这是您代码中的第一行）。以下是需要更改的内容：

<div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px">

将表格对齐到顶部 - Angular 表格和垫卡

Align tables to the top - Angular tables and mat-cards

vertical-alignment

angular