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

<style>
.tableheader {
    position: relative;  top: 0px;  z-index: 105;
  }
.frozencol {position: relative;left:0px;}
</style>


<div id="tablediv" (scroll)="this.scroll($event)" style="width:100%;height:calc(100% - 30px);overflow: auto;">
  <table cellspacing="0">
    <tr class="tableheader">
      <th class="frozencol">#</th>
      <th class="frozencol">列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
    </tr>
    <tr *ngFor="let r of datarows;let i=index">
      <td class="frozencol">{{i+1}}</td>
      <td class="frozencol">{{r[0]}}</td>
      <td class="frozencol">{{r[1]}}</td>
      <td class="frozencol">{{r[2]}}</td>
      <td class="frozencol">{{r[3]}}</td>
    </tr>
  </table>
</div>

.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';
    }