Angular8 实现table表格表头固定效果
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。
效果图：
html结构
按区域划分可以分为三个大部分，一共是通过4个table组合成一个整体的table。
然后通过col属性去设定列的宽度，注意：这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。
水平滚动效果与垂直滚动效果
监听主体table（浅绿色部分）滚动事件，同步上下滚动头部的table（深绿色部分）和左右滚动左侧固定的table（红色部分中的紫色部分）
代码1
$(this.tableContent.nativeElement).on('scroll',(e)=>{
$(this.fixedRowWrapper.nativeElement).prop('scrollTop',$(this.tableContent.nativeElement).prop('scrollTop'));
//方式一：设置头部固定列table的滚动条，需要配合less样式隐藏滚动条（如果不考虑ie9的兼容性，可以使用。less样式参考代码2）
//$(this.tableHeader.nativeElement).prop('scrollLeft',$(this.tableContent.nativeElement).prop('scrollLeft'))
//方式二：设置头部固定列table的margin-left属性为负值，间接实现了头部固定的列同步向左滚动效果，兼容ie9
$(this.tableHeader.nativeElement).css({marginLeft:`${-$(this.tableContent.nativeElement).prop('scrollLeft')}px`})
})
代码2
.ngx-table__header-inner{
//隐藏滚动条，页面div保持横向滚动，但是不支持ie9，为了兼容性所以没有使用，ts中同步滚动
//而是动态设置ngx-table__header-inner的margin-left实现滚动效果
overflow:-moz-scrollbars-none;
overflow-x:auto;
-ms-overflow-style:none;
&::-webkit-scrollbar{
width:0!important;
display:none;
}
}
完整代码地址
github项目地址，需要的可以点击访问https://github.com/zjinger/ngx-TPR/tree/master/src/app/components/scroll-table
总结
以上所述是小编给大家介绍的Angular8实现table表格表头固定效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。