Заморозить первые две строки при вертикальной прокрутке страницы

Я реализовал таблицу с горизонтальной прокруткой по углу и имею требование исправить первые два столбца при прокрутке по вертикали. Я создал стек, чтобы показать две таблицы. Что я ищу, так это то, что, когда пользователь прокручивает вторую таблицу, первые две строки с именами Legal Class и Fund должны быть фиксированными.

Я пытался применить следующий класс для соответствующих tds, и он не работал

.stickyRows { position: sticky; }

Вот блик стека

th { padding: 7px; position: sticky; left: 0px; min-width: 250px; width: 250px; background-color: #f5f7f7; } td { padding: 7px; min-width: 250px; /* max-width: 300px; */ } .fundClassesTable { table-layout: fixed; } .cellbgcolor { color: transparent; } .btn {} .tableItem { text-align: left; border-left: solid 1px lightgrey; border-top: solid 1px lightgrey; border-right: solid 1px lightgrey; border-bottom: solid 1px lightgrey; } .rowItem:hover { background-color: #f5f7f7; } label { margin-left: 0.5rem; vertical-align: middle } .panel-heading { color: black; border-color: #ddd; overflow: hidden; padding-top: 5px !important; padding-bottom: 5px !important; } .panel-heading .left-label { display: inline-block; padding-top: 5px !important; } .scrollClass { overflow-x: scroll; display: grid; overflow-y:hidden; height: 100%; } .panel-heading label { margin-bottom: 0px !important; } #FundClass tr:hover { background-color: #ECF0F1; } .headcol { position: absolute; min-width: 300px; max-width: 300px; width: 5em; left: 0; top: auto; border-top-width: 1px; /*only relevant for first row*/ margin-top: -1px; /*compensate for top border*/ } .headcol:before { content: 'Row '; } .collapsed { color: #d6630a; font-size: 22px; text-decoration: none; font-weight: bold; } .expanded { color: #d6630a; font-size: 22px; text-decoration: none; font-weight: bold; } .fixed-side { border: 1px solid #000; background: #eee; visibility: visible; } .card-body { flex: 1 1 auto; padding: 0px; margin: 10px 0; background-color: white; }

<div class="card"> <div class="card-header panel-heading"> <span class="left-label" style="font-size: 18px; font-weight: bold; ">Accounting Fund Classes</span> </div> <div [ngClass]="{'show': isExpanded}" id="fundClass" class="collapse" role="tabpanel" aria-labelledby="fundClass_heading" data-parent="#fundClass" [attr.aria-expanded]="isExpanded"> <div class="card-body scrollClass" *ngIf="data"> <table id="FundClass" class="fundClassesTable table-striped"> <tr *ngFor="let c of ColumnNames"> <th Fund Name scope="col" [ngClass]="c != 'Buttons1'? 'tableItem bold' : 'tableItem cellbgcolor'"> {{ c }}</th> <ng-container *ngFor="let f of data let i=index"> <td class="tableItem" style="font-weight: bold" *ngIf="c == 'Fund Name'"> {{ f.FundName}} </td> <td [attr.id]="'f.Id'" *ngIf="c == 'Accounting Class Name'" class="tableItem"> {{ f.FundName}} </td> <td class="tableItem" *ngIf="c == 'Class ID'">{{f.Id}}</td> <td [attr.id]="'f.Id'" *ngIf="c == 'Legal Fund Class'" class="tableItem"> {{ f.LegalFundClassName}} </td> <td [attr.id]="'f.Id'" *ngIf="c == 'Invested Amount'" class="tableItem"> {{ f.InvestedAmount | number : '.2-2'}} </td> <td [attr.id]="'f.Id'" *ngIf="c == 'Vehicle Type'" class="tableItem"> {{ f.VehicleTypeName}} </td> <td [attr.id]="'f.Id'" *ngIf="c == 'Closure Status'" class="tableItem"> {{ f.ClosureStatusName}} </td> <td class="tableItem" *ngIf="c == 'Buttons1'"> <button *ngIf="!EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 " (click)="buttonClicked(f.Id)">Edit</button> <button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1" (click)="buttonClicked(f.Id)">Cancel</button> </td> </ng-container> </tr> </table> </div> </div> </div>

Ответы

Ответ 1

Я надеюсь, что это то, что вы искали:

app.component.css

/* Container should define how tall the scrollable content is */
.scrollClass{
  height: 500px;
}

/* tagetting the first <th>; to ensure <th> are scrolled along with <td> */
.fundClassesTable tr:nth-child(1) th{
  z-index: 3;
  position: sticky;
  position: -webkit-sticky;
  top: 2px;
}

/* target all <td> in the first row to be sticky */
.fundClassesTable tr:nth-child(1) td{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 2px;
  z-index: 2;
  background-color: white;
  font-weight: bold;
}

/* Same as above but with top property as 36px 
because the 2nd "row" is 36px from the top of <table> */
.fundClassesTable tr:nth-child(2) th{
  z-index: 3;
  position: sticky;
  position: -webkit-sticky;
  top: 38px;
}

.fundClassesTable tr:nth-child(2) td{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 38px;
  z-index: 2;
  background-color: white;
  font-weight: bold;
}

Разветвленный стек-блиц

EDIT:

Решение Riv сработало для меня, но у меня осталась одна ноющая проблема. Когда я прокручиваю фиксированные строки, я вижу данные строк, видимых между пробелами фиксированных строк, а границы фиксированных строк не видны

Возможно, это не лучшее решение, но я бы использовал псевдоселектор :: after, чтобы создать фон для ячеек прикрепленной таблицы, чтобы скрыть фоновые ячейки при прокрутке вниз.

.fundClassesTable tr:nth-child(1)::after{
  content: '';
  position: absolute;
  height: 71px;
  width: 96.7%;
  top: 55px;
  left: 19px;
  z-index: 1;
  background-color: white; //create a white background to cover your other cells when scrolled down
  border: solid 1px deeppink;
}

Ответ 2

попробуйте добавить это в свой стиль


  .card-body{
    height:200px;
    position:relative!important;
    overflow-y:scroll;
  }


  table tr:nth-child(1){

    position :sticky;
    top:0;
    z-index:999;
    left:0;
    background-color:#fff;
}

 table tr:nth-child(2){

    position :sticky;
    top:35px;
    z-index:999;
    background-color:#fff;
    left:0;
}