angular 簡單固定表格的首行與首列
阿新 • • 發佈:2020-08-25
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; }