CdkVirtualScrollViewport 标头未修复

Question

在我的角度应用程序中，我想将表格标题保持在固定位置并仅将滚动条显示到正文部分。

我正在使用 Angular 的 CdkVirtualScrollViewport 库来绘制表格内容。但它没有给我适当的结果。它显示标题本身的滚动条。请帮助我解决这个问题。下面附上详细信息。

Html页面

<cdk-virtual-scroll-viewport [itemSize]="25" [style.height.vh]="height" class="viewport">
    <table mat-table [dataSource]="dataSource" matSort aria-label="Elements" cdkDropListGroup class="table">

      <tr mat-header-row *matHeaderRowDef="columnsDef; sticky: true" class="column-header"></tr>
      <tr
        [style.backgroundColor]="hasTelematic(row) ? '#f3f3f3' : '#ffffff'"
        mat-row
        class="row-content"
        *matRowDef="let row; columns: columnsDef"
      ></tr>
    </table>
  </cdk-virtual-scroll-viewport>

当前结果

预期结果 - 标题应位于固定位置。

注意：我尝试了其他论坛中提供的解决方案，但它不起作用。

Answer 1

我找到了一个解决方法。

我放置了 2 个 cdk-virtual-scroll-viewreport。一个用于 header，另一个用于 body。对于标题，我将溢出-y 隐藏，这样滚动条就不会出现。

标题

<cdk-virtual-scroll-viewport [itemSize]="25" [style.height.vh]="12" class="viewport" style="overflow-y: hidden;">
    <table mat-table [dataSource]="dataSource" matSort aria-label="Elements" cdkDropListGroup class="table">
      <tr mat-header-row *matHeaderRowDef="columnsDef; sticky: true" class="column-header"></tr>
    </table>
  </cdk-virtual-scroll-viewport>  

身体

<cdk-virtual-scroll-viewport [itemSize]="25" [style.height.vh]="height" class="viewport">
    <table mat-table [dataSource]="dataSource" matSort aria-label="Elements" cdkDropListGroup class="table">
      
      <tr
        [style.backgroundColor]="hasTelematic(row) ? '#f7f7f7' : '#ffffff'"
        mat-row
        class="row-content"
        *matRowDef="let row; columns: columnsDef"
      ></tr>
    </table>
  </cdk-virtual-scroll-viewport>

Answer 2

我通过在“column-header”类中添加以下 css 解决了上述问题 -

.table-row {
  position: sticky;
  top: 0;
  z-index: 10;
}