如何使用Angular8实现表格表头固定显示效果？

本文共计673个文字，预计阅读时间需要3分钟。

最近项目中有一个需求，要求表头固定，内部实现滚动条。除了单个表头外，还有多个表头的情形（下一篇中介绍）。效果图：HTML结构+区域划分可以分为三个大块，共同使用4个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的兼容性，可以使用。