先看图片吧

GIF压缩的很厉害，原图是这样的

能够看到头部是固定的，并且各项不论是浏览器放大放大，各项都是固定的。

先来说说思路吧

首先这不是一个表格，这是两个表格，也就是其实头部和本体是各一个table

<table class="tableHead"> <tr *ngFor"let item of headData">  <td>{{item.title}}</td> </tr></table><table class="tableBody"> <tr *ngFor="let data of bodyData;let i = index" #element>  <ng-container *ngFor="let item of headData">   <span[innerHTML]="data[item.property]?data[item.property]:'--'"></span>  </ng-container> </tr></table>

以下是简略的列表页数据

 headData:Array<any>=[    {title:'操作',property:'checkbox',type:'checkbox',width:''},    {title:'序号',property:'serial',type:'serial',width:''},    {title:'信息类型',property:'infoType',type:'special',width:''},    {title:'服务名称',property:'serviceName',type:'special',width:''},    {title:"数据起源",property:'sourceName',type:'special',width:''},    {title:"服务版本",property:'serviceVersion',width:''},    {title:"服务形容",property:'description',width:''},    {title:"注册单位",property:'register',width:''},    {title:"注册工夫",property:'registerDate',width:''},    {title:"服务状态",property:'status',type:'state',width:''},  ]    bodyData:Array<any>=[    {       infoType:'航行平安信息服务',serviceName:'航行通告',sourceName:'海上平安信息公布零碎',       serviceVersion:'v1.0',description:'测试形容',register:'航测科技核心',registerDate:'20201-5-8 9:51',       status:"0" ,infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'    },    {       infoType:'航行平安信息服务',serviceName:'航行通告',sourceName:'海上平安信息公布零碎',       serviceVersion:'v1.0',description:'测试形容',register:'航测科技核心',registerDate:'20201-5-8 9:51',       status:"0" ,infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'    },  ]

页面上就是依据数据而后循环进去的列表，款式和具体的判断不表，此次仅仅只是阐明如何管制头部和本体的两个表格的宽度统一

思路就是在浏览器的大小扭转的时候，取得本体表格也就是tableBody的一行tr中的每一个td宽度，而后赋值给headData中的width属性，这样表格的宽度就会主动变动了

//将html文件中的#element对象绑定，获取到其dom@ViewChild('element') navListElement: ElementRef;ngAfterViewInit(){//在初始化了组件的视图后执行    this.setWidth()    window.onresize=($event)=>{//监听浏览器的窗口大小扭转事件      this.setWidth()    }  }   setWidth(){    setTimeout(() => {//利用定时器把以下操作往后推一个生命周期，不然有可能拿不到对象      if(this.navListElement){        let children = this.navListElement.nativeElement.children//这一步拿到的是循环进去的第一个tr对象自身的所有后辈 也就是tr外面的td        for(let i = 0;i<children.length-1;i++){          let item = children[i]          // console.log('item.offsetWidth',item.offsetWidth);          this.headData[i].width=item.offsetWidth//将宽度赋值到headData的width中        }      }    });  }

这样就能够实现两个表格的宽度同步了，其余的问题比方解决滚动条的占位问题就暂且不表了，下次有机会再讲吧。