先看图。GIF压缩非常强大。原图是这样的。您可以看到头部是固定的，并且无论浏览器如何，所有项目都被放大或缩小。所有项目都是固定的。先说说思路吧。首先，这不是一个表，而是两个表，即表头和表体各一个表| {{item.title}} | 以下为简要列表页数据headData:Array=[{title:'Operation',property:'checkbox',type:'checkbox',width:''},{title:'序号',property:'serial',type:'serial',width:''},{title:'信息类型',property:'infoType',type:'special',width:''},{title:'服务名称',property:'serviceName',type:'special',width:''},{title:"DataSource",property:'sourceName',type:'special',width:''},{title:"服务版本",property:'serviceVersion',width:''},{title:"服务描述",property:'description',width:''},{title:"注册单位",property:'register'，宽度:''},{title:"注册日期",property:'registerDate',width:''},{title:"服务状态",property:'status',type:'state',width:''},]bodyData:Array=[{infoType:'航行安全信息服务',serviceName:'航海须知',sourceName:'海上安全信息发布系统',serviceVersion:'v1.0',description:'测试Description',register:'航测技术中心',registerDate:'20201-5-89:51',status:"0",infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'},{infoType:'航行安全信息服务',serviceName:'航海须知',sourceName:'海上安全信息发布系统',serviceVersion:'v1.0',description:'测试说明',register:'航测技术中心',registerDate:'20201-5-89:51',status:"0",infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'},]page上面是根据数据然后循环出来的list。风格和具体判断未展示。这次只是讲解如何控制header和body两个表格的宽度。这个想法是在浏览器的大小发生变化时获取body表。即tableBody中tr的一行中每个td的宽度，然后赋值给headData中的width属性，这样表格的宽度就会自动改变//绑定html文件中的#element对象得到itsdom@ViewChild('element')navListElement:ElementRef;ngAfterViewInit(){//初始化组件的view后执行this.setWidth()window.onresize=($event)=>{//监听浏览器的窗口大小变化事件this.setWidth()}}setWidth(){setTimeout(()=>{//使用定时器将后面的操作往后推一个生命周期，否则maytakeLessthanobjectif(this.navListElement){letchildren=this.navListElement.nativeElement.children//这一步得到的是第一个tr对象本身的所有后代，也就是tr中的tdfor(leti=0;i
