当我缩放页面时，表格的水平滚动条应该出现，目前垂直滚动条在那里

Question

当我缩放页面时，表格的水平滚动条应出现，目前有垂直滚动条，因此在缩放页面时需要水平滚动条...。

When I zoom the page Horizontal  scroll bar should appear for the table, At present vertical scroll bar is there, So I need Horizontal Scroll bar when I zoom the page ....

table {
    background: linear-gradient(90deg, rgb(240,240,240), rgb(250,250,250));
    
        th {
        color:blue;
        border-top: 0;
        padding: 20px 0px 20px 15px;
        font-size: 1rem !important;
        
    }

    tbody tr {
        border-top: 1px solid #ececec;
    
        td {
            padding: 25px 0px 25px 15px;
            font-size: 1rem;
             border-top: 0;
        }
    }
}

.tran-table::-webkit-scrollbar {
    width: 5px;
 }

 .tran-table::-webkit-scrollbar-thumb {
     background: #888; 
 }

When I zoom the page Horizontal  scroll bar should appear for the table, At present vertical scroll bar is there, So I need Horizontal Scroll bar when I zoom the page ....

<table class="table ">
    <thead >
        <th  (click)="transactionSorting('date');">
            Date <i class="fa" [ngClass]="sortingIconClass('date')" aria-hidden="true"></i>
        </th>
        <th (click)="transactionSorting('accountId');">
            Account #<i class="fa" [ngClass]="sortingIconClass('accountId')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('accountNickName');">
            Account Nickname<i class="fa" [ngClass]="sortingIconClass('accountNickName')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('transaction');">
            Transaction Type <i class="fa" [ngClass]="sortingIconClass('transaction')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('symbolcusip');">
            Symbol/CUSIP <i class="fa" [ngClass]="sortingIconClass('symbolcusip')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('description');">
            Description <i class="fa" [ngClass]="sortingIconClass('description')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('heldin');">
            Held In <i class="fa" [ngClass]="sortingIconClass('heldin')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('quantity');">
            Qty <i class="fa" [ngClass]="sortingIconClass('quantity')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('price');">
            Price <i class="fa" [ngClass]="sortingIconClass('price')" aria-hidden="true"></i>
        </th>
        <th  (click)="transactionSorting('amount');">
            Value ($) <i [ngClass]="sortingIconClass('amount')" aria-hidden="true"></i>
        </th>
    </thead>

    <tbody *ngIf="loading || error || noData">
        <tr>
            <td  *ngIf="loading">
                <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                <span class="sr-only">Loading...</span>
            </td>
            <td  *ngIf="error">
                <ngb-alert [dismissible]="false" type="danger">{{errorMessage}}</ngb-alert>
            </td>
            <td  *ngIf="noData">
                <ngb-alert [dismissible]="false" type="info">No transactions available</ngb-alert>
            </td>
        </tr>
    </tbody>

    <tbody  class="tran-table " *ngIf="transactions?.length > 0 && !loading && !error && !noData"
        (scroll)="onScrolled($event);">
        <ng-container *ngFor="let t of transactions">
            <tr >
                <td >{{t.date?.format('MM/DD/YYYY')}}</td>
                <td >{{t.accountNumber | maskAccountno: maskAccountNo}}</td>
                <td >{{t.accountNickName}}</td>
                <td >{{t.transaction}}</td>
                <td >{{t.symbolcusip}}</td>
                <td >{{t.description | titlecase}}</td>
                <td >{{t.heldin}}</td>
                <td >{{t.quantity}}</td>
                <td >{{t.price | currency}}</td>
                <td >{{t.amount | currency}}</td>
            </tr>
            <tr *ngIf="t.showRealizedData">
                <th >Puchase Date</th>
                <th>Quantity</th>
                <th >Unit Cost($)</th>
                <th >Cost Basis($)</th>
                <th >Price($)</th>
                <th >Value($)</th>
                <th >Short term<br>Gain/Loss($)</th>
                <th  style="border-right: 0;">Long term<br>Gain/Loss($)</th>
                <th style="width: 12%;border-right: 0;">
                    <img class="icon mr-3" title="Export CSV" *ngIf="t.subTransactions?.length > 0" (click)="download('text/csv')"
                        src="./assets/images/export_CSV.png" />
                </th>
            </tr>