html - 在具有两个标题的表格中，主标题不会在滚动时保持粘性

Question

我有我的表，里面有两行标题来显示两个标题，如图所示。

现在根据我的 css 代码，我正在向表体添加滚动，因此 tbody 被滚动但是主标题(具有 class="table-main-heading")不会保持粘性，所以我应该怎么办即使我滚动，也要保持主标题粘性吗？ (检查下面的图片-主标题在向下滚动时隐藏)

以下是我的html和css文件

table.html

 <div class="tableFixHead tbody-scroll">
    <table class="table text-center">
       <thead class="top-head">
          <tr class="table-main-heading">
             <th scope="col" colspan="2" class="border-right-b">User</th>
             <th scope="col" colspan="3" class="border-right-b">Usage</th>
             <th scope="col" colspan="6" class="border-right-b">Brain Data</th>
             <th scope="col" colspan="2">Notes</th>
          </tr>
          <tr class="sub-heading-table text-left">
             <th scope="col">ID</th>
             <th scope="col">Name</th>
             <th scope="col">Compliance</th>
             <th scope="col">Total Days</th>
             <th scope="col">Days Used</th>
             <th scope="col">Sessions/Day</th>
             <th scope="col">Ideal</th>
             <th scope="col">Start BFV</th>
             <th scope="col">Current BFV</th>
             <th scope="col">Min</th>
             <th scope="col">Max</th>
             <th scope="col">Avg</th>
             <th scope="col" width="250px">Notes</th>
             <!-- <th scope="col">Comments</th> -->
          </tr>
       </thead>
       <tbody class="text-left table-body" *ngIf="view==='Organization'">
          <tr *ngFor="let user of users" (click)="onUserSelect(user)" class="user-tbl-row">
          <th scope="row">{{user?.userId}}</th>
          <td class="border-right-b">{{user?.userName ? user?.userName : '-'}}</td>
          <td>{{user?.compliance ? user?.compliance :0}}</td>
          <td>{{user?.totalDays ? user?.totalDays : 0}}</td>
          <td> </td>
          <td class="border-right-b">{{user?.sessionPerDay ? user?.sessionPerDay : 0}}</td>
          <td>{{user?.ideal ? user?.ideal : 0 }}</td>
          <td>{{user?.beforeStartValue ? user?.beforeStartValue : 0}}</td>
          <td>{{user?.afterValue ? user?.afterValue : 0}}</td>
          <td>{{user?.min}}</td>
          <td>{{user?.max ? user?.max : 0}}</td>
          <td class="border-right-b">{{user?.avg | number:'2.1-2'}}</td>
          <!-- <td class="border-right-b">{{user?.notes ? user?.notes : '-'}} </td> -->
          <td class="border-right-b">
             <span>{{user?.notes | ellipses :
             (user.isViewMore ?
             ellipsesLength
             : user?.notes?.length)}}</span>
             <a href="javascript:;" *ngIf="ellipsesLength < user?.notes?.length && user?.isViewMore"
             (click)="viewMore($event,user)" class="cc-pro-reviews-read-full-btn"> ...show more</a>
             <a href="javascript:;" *ngIf="ellipsesLength < user?.notes?.length && !user?.isViewMore"
             (click)="viewMore($event,user)" class="cc-pro-reviews-read-full-btn less"> show less</a>
          </td>
          <!-- <td>{{user?.comments ? user?.comments : '-'}}
             </td> -->
          </tr>
          <tr *ngIf="users.length===0">
             <td class="text-center" colspan="13">No Data Available</td>
          </tr>
       </tbody>
    </table>
  </div>

table.css code

 .tableFixHead {
        overflow-y: auto;
        max-height: 511px;
    }

    .tableFixHead th {
        position: sticky;
        top: 0;
        height: 42px;
    }

    .tableFixHead thead th {
        z-index: 9999;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding: 8px 16px;
    }

    .dashboard-sidebar .sidebar-select>div:last-child::-webkit-scrollbar,
    .tbody-scroll::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }

    .dashboard-sidebar .sidebar-select>div:last-child::-webkit-scrollbar-thumb,
    .tbody-scroll::-webkit-scrollbar-thumb {
        background-color: #4B6D79;
        border-radius: 10px;
    }

    .tbody-scroll {
        position: relative;
        max-height: 397px;
        overflow-y: scroll;
        bottom: 17px;
    }

Answer 1

您的代码正在运行，但第一行只是在第二行下保持 sticky 作为所有 th 的值(两行都是):top:0 。

您需要像这样为每个标题行提供不同的值:

     .tableFixHead .table-main-heading th {
        position: sticky;
        top: 0;
        height: 42px;
    }
     .tableFixHead .sub-heading-table th {
        position: sticky;
        top: 56px;
        height: 42px;
    }

beign 56px 第一行的高度。