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

user_3574471 0
Viewed 332

i am trying to align two tables to the top. Without success - see the attached screenshot.

Uneven tables

I tried using vertical-align on every possible level- no success.

All ideas are very appreciated.

My HTML code looks as follows:

<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>
angular vertical-alignment
2 Answers

try fxLayoutAlign with start

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

See Layout Demos

user_100360390

This issue is in the alignment provided by you. Replace "center" with "start". Please use below line(which is first line in your code). Below is change needed:

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