angular 简单固定表格的首行与首列

html

"tablediv" (scroll)="this.scroll($event)" style="width:100%;height:calc(100% - 30px);overflow: auto;">
   "0">
       class="tableheader">
           "let r of rows">
           
"let c of columns;let i=index" [class.frozencol]="!i">{{c.name}}
       
       
"let c of columns;let i=index" [class.frozencol]="!i">{{r[c.prop]}}
       
   

js

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

css

.tableheader {
  position: relative;
  top: 0;
  z-index: 105;
}

.frozencol {
  position: relative;
  left: 0;
  background: #ddd;
}