如何解决带粘性标题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 举报,一经查实,本站将立刻删除。