html - 如何不重叠表和行？

Question

当我缩小 chrome 页面时，HTML 表格重叠，当缩放时该表格不应与其他行和列重叠

请帮助我，在此先感谢

这是我的 CSS 代码和我的 HTML5 代码。当我缩小 chrome 页面时，HTML 表格在缩放时重叠 该表格不应与其他行和列重叠。

table {
         background: linear-gradient(90deg, rgb(240,240,240), rgb(250,250,250));
         font-size: 13px;
         line-height: 14px;
        
 
         .table-header .t-cell {
             color:blue;             
             font-size: 1rem !important;
             cursor: pointer;
         }
 
     }
     .t-cell {         
         width: 10%;
         // width: calc(12% - 5px);
         font-size: 1rem;
         border-top: 0;
         
     }
 
 
     .t-sub-cell {
         width: 11%;
         border-right: 1px solid #ececec;
         border-top: 0 !important;
         padding-left: 1% !important;
         height: 10vh;
     }
 
     .t-sub-header-cell {
         width: 11%;
         border-right: 1px solid #ececec;
         border-top: 0;
         padding-left: 1% !important;
         height: 10vh;
     }
 
     .t-sub-cell1 {
         width: 11%;
         padding-left: 1% !important;
     }
 
     .t-action {
         width: 5%;
         border-top: 0;
     }
 
     .tran-table {
         height: calc(100vh - 250px);
         overflow-y: auto;
     }
 
     .tran-table::-webkit-scrollbar {
         width: 5px;
     }
 
     .tran-table::-webkit-scrollbar-thumb {
         background: #888; 
     }
 
     .tran-desc {
         font-weight: 600;
     }
 
     .tran-desc-detail {
         width: 200px !important;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         display: inline-block;
     }
 
     .table-header {
         border-top: 1px solid #ececec;
     }
 
     .tran-table tr {
         border-top: 1px solid #ececec;
     }
 
     .sub-table-header {
         width: calc(100% - 25px) !important;
         border-left: 1px solid #ececec;
         border-right: 1px solid #ececec;
         border-top: 1px solid #ececec;
         height: 10vh;
     }
 
     .sub-table {
         width: calc(100% - 25px) !important;
         border-top: 1px solid #ececec;
         border-left: 1px solid #ececec;
         border-right: 1px solid #ececec;
     }
 
     .sub-table-last-row {
         margin-bottom: 10px;
         border-bottom: 1px solid #ececec;
     }
 
     .download-btn {
         width: 10%;
         height: 70%;
     }
 
     .icon {
         width: 35px;
         height: 25px;
     }
 
     .export-btn:hover {
         width: 40px;
         height: 35px;
         margin-top: 10px !important;
         cursor: pointer;
     }
 
     .desc{
         width: 15%;
         padding-left: 20px;
         font-size: 1rem;
         border-top: 0;
     }
     .heldIn{
         width: 6%;
         word-wrap: break-word;
     }
     .w-q{
         width: 9%;
     }
     .account-name{
         width: 11%
     }
 
     th.currency-header:after {
         content: ' ($)';
         font-size: 1rem;
         top: 0;
         color:blue;
 
     }

<div class="mt-3 card-title" role="region" aria-labelledby="yourTransactions">
    <div class="row">
        <div class="col">
            <h1 id="yourTransactions">Your Transactions</h1>
        </div>
        <div class="col row justify-content-end">
            <img class="icon mt-3 mr-3 export-btn" alt="Export CSV" title="Export CSV" *ngIf="transactions?.length > 0" tabindex=0 (keyup.enter)="download('text/csv')" (click)="download('text/csv')"
                src="./assets/images/export_CSV.png" />
            <sh-accounts-dropdown class="m-2" [accounts]="dropdownOptions.types" (change)="setFilter('type', $event)"></sh-accounts-dropdown>
            <sh-accounts-dropdown class="m-2" [accounts]="dropdownOptions.accounts" (change)="setFilter('account', $event)"></sh-accounts-dropdown>
        </div>
    </div>
</div>
<table class="table d-block m-0">
    <thead class="text-muted d-block col-12 float-left p-0 pr-1 w-100 table-header">
        <th class="d-block float-left t-cell" (click)="transactionSorting('date');">
            Date <i class="fa" [ngClass]="sortingIconClass('date')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell" (click)="transactionSorting('accountId');">
            Account #<i class="fa" [ngClass]="sortingIconClass('accountId')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell account-name" (click)="transactionSorting('accountNickName');">
            Account Nickname<i class="fa" [ngClass]="sortingIconClass('accountNickName')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell pr-2" (click)="transactionSorting('transaction');">
            Transaction Type <i class="fa" [ngClass]="sortingIconClass('transaction')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell" (click)="transactionSorting('symbolcusip');">
            Symbol/CUSIP <i class="fa" [ngClass]="sortingIconClass('symbolcusip')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell desc"  (click)="transactionSorting('description');">
            Description <i class="fa" [ngClass]="sortingIconClass('description')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell heldIn" (click)="transactionSorting('heldin');">
            Held In <i class="fa" [ngClass]="sortingIconClass('heldin')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left  text-right t-cell w-q"  (click)="transactionSorting('quantity');">
            Qty <i class="fa" [ngClass]="sortingIconClass('quantity')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell text-right t-cell w-q" (click)="transactionSorting('price');">
            Price <i class="fa" [ngClass]="sortingIconClass('price')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell text-right currency-header w-q" (click)="transactionSorting('amount');">
            Value <i [ngClass]="sortingIconClass('amount')" aria-hidden="true"></i>
        </th>
    </thead>
</table>

Answer 1

    <div class="mt-3 card-title" role="region" aria-labelledby="yourTransactions">
    <div class="row">
        <div class="col">
            <h1 id="yourTransactions">Your Transactions</h1>
        </div>
        <div class="col row justify-content-end">
            <img class="icon mt-3 mr-3 export-btn" alt="Export CSV" title="Export CSV" *ngIf="transactions?.length > 0" tabindex=0 (keyup.enter)="download('text/csv')" (click)="download('text/csv')"
                src="./assets/images/export_CSV.png" />
            <sh-accounts-dropdown class="m-2" [accounts]="dropdownOptions.types" (change)="setFilter('type', $event)"></sh-accounts-dropdown>
            <sh-accounts-dropdown class="m-2" [accounts]="dropdownOptions.accounts" (change)="setFilter('account', $event)"></sh-accounts-dropdown>
        </div>
    </div>
</div>
<div class="table" style="overflow:scroll">
<table class="table d-block m-0">
    <thead class="text-muted d-block col-12 float-left p-0 pr-1 w-100 table-header">
        <th class="d-block float-left t-cell" (click)="transactionSorting('date');">
            Date <i class="fa" [ngClass]="sortingIconClass('date')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell" (click)="transactionSorting('accountId');">
            Account #<i class="fa" [ngClass]="sortingIconClass('accountId')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell account-name" (click)="transactionSorting('accountNickName');">
            Account Nickname<i class="fa" [ngClass]="sortingIconClass('accountNickName')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell pr-2" (click)="transactionSorting('transaction');">
            Transaction Type <i class="fa" [ngClass]="sortingIconClass('transaction')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell" (click)="transactionSorting('symbolcusip');">
            Symbol/CUSIP <i class="fa" [ngClass]="sortingIconClass('symbolcusip')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell desc"  (click)="transactionSorting('description');">
            Description <i class="fa" [ngClass]="sortingIconClass('description')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell heldIn" (click)="transactionSorting('heldin');">
            Held In <i class="fa" [ngClass]="sortingIconClass('heldin')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left  text-right t-cell w-q"  (click)="transactionSorting('quantity');">
            Qty <i class="fa" [ngClass]="sortingIconClass('quantity')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell text-right t-cell w-q" (click)="transactionSorting('price');">
            Price <i class="fa" [ngClass]="sortingIconClass('price')" aria-hidden="true"></i>
        </th>
        <th class="d-block float-left t-cell text-right currency-header w-q" (click)="transactionSorting('amount');">
            Value <i [ngClass]="sortingIconClass('amount')" aria-hidden="true"></i>
        </th>
    </thead>
</table>
</div>

用上面的代码更新你的代码