带有粘性标题的虚拟滚动html表角

vu8f3i0k 于 2023-05-15 发布在其他

关注(0)|答案(2)|浏览(221)

我从后端得到超过30000条记录到前端的列表，所以使用cdk-virtual-scroll我可以实现这一点。我已经创建了一个普通的表，并附上了cdk标签

<cdk-virtual-scroll-viewport [itemSize] = "20">
            <div class="result_table">
             <table class="dataframe" border="1">
            <thead>
              <tr>
                <th >
                  Name
                </th>
                <th >
                  Description
                </th>
                <th >
                  Group
                </th>
                <th >
                  Data
                </th>
              </tr>
            </thead>
                <tbody>
                  <tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
                    <td >
                      {{data.name}}
                    </td>
                                             
                    <td >
                      {{data.description}}
                    </td>
                    <td >
                     {{data.group}}
                    </td> 
                    <td >
                     {{data.data}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </cdk-virtual-scroll-viewport>

如果我这样做，当我向下滚动时，表头也会滚动，如果我这样做，

<cdk-virtual-scroll-viewport [itemSize] = "20">
            <div class="result_table">
             <table class="dataframe" border="1">
            <thead>
              <tr>
                <th style="width: 20% !important;">
                  Name
                </th>
                <th style="width: 40% !important;">
                  Description
                </th>
                <th style="width: 20% !important;">
                  Group
                </th>
                <th style="width: 20% !important;">
                  Data
                </th>
              </tr>
            </thead>
                <tbody>
                  <tr *cdkVirtualFor ="let data of address_obj_data_holder | filter:searchAddr">
                    <td style="width: 20% !important;">
                      {{data.name}}
                    </td>
                                             
                    <td style="width: 40% !important;">
                      {{data.description}}
                    </td>
                    <td style="width: 20% !important;">
                    {{data.group}}
                    </td> 
                    <td style="width: 20% !important;">
                      {{data.data}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </cdk-virtual-scroll-viewport>

header和tbody的宽度略有不同，两者的宽度都不相同，因为我们只在body下面滚动。有人能帮我解决这个对齐问题吗？

Html

来源：https://stackoverflow.com/questions/64439244/cdk-virtual-scrolling-with-sticky-header-html-table-angular

2条答案

按热度按时间

ymzxtsji1#

每个标题位置可以调整的方法

<th [style.top]="inverseOfTranslation"> ... </th>

和相关代码

@ViewChild(CdkVirtualScrollViewport, { static: false })
  public viewPort: CdkVirtualScrollViewport;

public get inverseOfTranslation(): string {
    if (!this.viewPort) {
      return '-0px';
    }
    const offset = this.viewPort.getOffsetToRenderedContentStart();

    return `-${offset}px`;
  }

赞(0）回复(0）举报 2023-05-15

7uhlpewt2#

如果你想让表格的标题具有粘性，并且你正在使用cdk-virtual-scroll-viewport，那么试试这个：

table { overflow: auto; }
thead { position: sticky; top: 0; }

赞(0）回复(0）举报 2023-05-15

我来回答

带有粘性标题的虚拟滚动html表角

2条答案

相关问题

热门标签

最新问答