无法在正确的位置显示垫子桌子

Question

我无法在网页上看到垫子表。它像这样在侧面导航中对齐显示。

我想将其显示在侧面导航的右侧。

vendor.component.html

<div class="vendor-style">    
    <app-vendor-slider></app-vendor-slider>    //this is selector of vendor-slider.component.html
</div>
<div>
    <table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="item">
        <td mat-cell *matCellDef="let reviews" class="item-name"> {{reviews.item}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
        <td mat-cell *matCellDef="let reviews"> {{reviews.value}} </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
    </table>
</div>

vendor-slider.component.html

<mat-sidenav-container class="sidebar-container">
    <mat-sidenav mode="side" opened class="sidenav-style mat-elevation-z4" role="navigation">
        <mat-nav-list>

           <mat-list-item class="list-item" routerLink="/vendor-list/vendor/outlets" [routerLinkActive]="['active']">Outlets</mat-list-item>
        <mat-list-item class="list-item" routerLink="/vendor-list/vendor/bankaccounts" [routerLinkActive]="['active']">Bank Accounts</mat-list-item>
        <mat-list-item class="list-item" routerLink="/vendor-list/vendor/subaccounts" [routerLinkActive]="['active']">Sub Accounts</mat-list-item>
        <mat-list-item class="list-item" routerLink="/vendor-list/vendor/kycdetails" [routerLinkActive]="['active']">KYC Details</mat-list-item>

        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

vendor.component.css

.vendor-style
{
    height: 100%; 
    width:100%;
    background-color:#EEEEEE;
}

vendor-slider.component.css

。

sidebar-container 
{
    height: 100%;
}

.list-item
{
    font-family: 'Montserrat', sans-serif;
    font-size: 12pt;
    color: #444444;
    font-weight: 500;
}
.sidenav-style
{
    width: 250px;
}