Angular8简单方式实现表格固定表头和冻结列

"tablediv" (scroll)="this.scroll($event)" style="width:100%;height:calc(100% - 30px);overflow: auto;">
  "0">
    "tableheader">
      "let r of datarows;let i=index">
      
"frozencol">#
      
"frozencol">列1
      
列2
      
列3
      
列4
    
    
{
     {
     i+1}}
      
{
     {
     r[0]}}
      
{
     {
     r[1]}}
      
{
     {
     r[2]}}
      
{
     {
     r[3]}}
    
  

.ts代码：

  public scroll(event){
     
    var x=document.getElementById('tablediv').scrollLeft;
    var y=document.getElementById('tablediv').scrollTop;
    //固定列
    //所有使用CSS类frozencol的td将被冻结，包括表头的th
    var tds=document.getElementsByClassName('frozencol');
    for(var i=0;i<tds.length;i++){
     
      tds[i].style.left=x + 'px';
    }
    //固定表头
  document.getElementById('tablediv').getElementsByTagName('tr')[0].style.top=y + 'px';
    }