带有粘性标题的 cdk 虚拟滚动 html 表格角度答案

【问题标题】：cdk virtual scrolling with sticky header html table angular带有粘性标题的 cdk 虚拟滚动 html 表格角度
【发布时间】：2020-10-20 05:54:10
【问题描述】：

我从后端获取超过 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>

header 和 tbody 的宽度略有不同，两者的宽度不同，因为我们仅在下面的 body 中滚动。谁能帮我解决这个对齐问题。

【问题讨论】：

标签： html css angular6 angular-cdk-virtual-scroll

【解决方案1】：

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

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

【讨论】：