angular 簡單固定表格的首行與首列

html

<div id="tablediv" (scroll)="this.scroll($event)" style="width:100%;height:calc(100% - 30px);overflow: auto;">
   <table cellspacing="0">
       <tr class="tableheader">
           <th *ngFor="let c of columns;let i=index" [class.frozencol]="!i">{{c.name}}</th>
       </tr>
       <tr *ngFor="let r of rows">
           <td  *ngFor="let c of columns;let i=index" [class.frozencol]="!i">{{r[c.prop]}}</td>
       </tr>
   </table>
</div>

 

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