这篇文章主要介绍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;
}
}以上是“Angular8怎么实现table表格表头固定效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
