angular8 实现table表格表头固定

最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。
效果图：

html 结构

按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。
然后通过 col 属性去设定列的宽度，注意：这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。

水平滚动效果与垂直滚动效果

监听主体table（浅绿色部分）滚动事件，同步上下滚动头部的table （深绿色部分）和 左右滚动左侧固定的table（红色部分中的紫色部分）

代码 1

 $(this.tableContent.nativeElement).on('scroll', (e) => {
      $(this.fixedRowWrapper.nativeElement).prop('scrollTop'