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

问题描述

我从后端到前端的列表中获得了30000多个记录，因此使用cdk-virtual-scroll我可以实现这一目标。我创建了包含cdk-tag

的普通表

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

标头和tbody的

宽度略有不同，两者的宽度不同，因为我们仅在主体下面滚动。有人可以帮我解决此对齐问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）