I have a total of four tables on my page. The size of one table is almost identical to the other three smaller tables. I am looking to place the loan details and credit details table below the application detail, in a way that utilizes the empty space available.
Currently, I am using a flex layout for the grid system. Is there a workaround to achieve this by utilizing the fx flex property of the flex layout?
Access the StackBlitz link here
https://i.sstatic.net/Pr5tp.png
This is the HTML code snippet:
<div class="container" fxLayout fxLayout.xs="column">
<div class="item item-1" fxFlex="50%">
<table id="customers" *ngIf="customerData">
<caption class="caption">
<h4>Customer Details</h4>
</caption>
<tr *ngFor="let item of customerData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
<div class="item item-2" fxFlex="50%">
<table id="customers" *ngIf="applicationData">
<caption class="caption">
<h4>Application Details</h4>
</caption>
<tr *ngFor="let item of applicationData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
</div>
<div class="container" fxLayout fxLayout.xs="column">
<div class="item item-1" fxFlex="50%">
<table id="customers" *ngIf="loanData">
<caption>
<h4>Loan Details</h4>
</caption>
<tr *ngFor="let item of loanData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
<div class="item item-2" fxFlex="50%">
<table id="customers" *ngIf="creditData">
<caption>
<h4>Credit Details</h4>
</caption>
<tr *ngFor="let item of creditData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
</div>