Основной заголовок не остается липким при прокрутке в таблице с двумя заголовками - PullRequest
Новая
       32

Основной заголовок не остается липким при прокрутке в таблице с двумя заголовками

0 голосов
/ 06 июня 2019

У меня есть таблица, внутри которой у меня есть заголовок с двумя строками для отображения двух заголовков, как показано на рисунке.

full table without scroll

Прямо сейчас, в соответствии с моим кодом CSS, я добавляю прокрутку в тело таблицы, следовательно, tbody - это прокрутка, но основной заголовок (имеющий class = "table-main-heading") не остается липким, так что я должен сделать этот главный заголовок липким, даже когда я прокручиваю? (проверьте ниже изображение - главный заголовок скрывается при прокрутке вниз)

table on user scroll(main header is get hides)

Ниже приведены мои 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>

код таблицы.css 

 .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;
    }

1 Ответ

1 голос
/ 06 июня 2019

Ваш код работает, но первая строка просто остается 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 высота для первого ряда.

...