在页面垂直滚动时冻结前两行

Question

我已经实现了一个带有角度水平滚动的表格，并且需要在垂直滚动时修复前两列。我创建了一个 stackblitz 来显示两个表。我要寻找的是，当用户滚动第二个表格时，应该固定前两行，即 Legal Class Name 和 Fund Name。

我尝试将以下类应用于各自的 tds，但没有成功

.stickyRows {
    position: sticky;
}

这里是堆栈闪电战

https://stackblitz.com/edit/angular-o2ukfs

        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>



    

Answer 1

尝试将此添加到您的样式中

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

Answer 2

我希望这就是您想要的：

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

Forked Stackblitz

编辑：

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