用js和html制作一个固定表头的表格
时间：2023-04-02 16:58:47
HTML
公司有个新需求，就是一个固定表头的表格。查查查查很麻烦，就自己写一个，如第一张图所示，效果很好，因为浏览器窗口变化时，js会计算宽度，而css只设置零件的最小宽度，所以兼容性一定没有问题。首先要明确的是，既然需要固定head，那么head和body就必须分两张表。结构如下
那么问题来了，既然有两个表，它们的td的宽度是由各自的内容决定的，自然如果不人为操作，宽度是一样的是绝对不可能的。既然如此，如果通过同一个对象来管理两个表，那么宽度自然是一样的。先看ts代码内容tabHead:Array
=[{title:'operation',property:'checkbox',type:'checkbox',width:''},{title:'序列号',property:'serial',type:'serial',width:''},{title:'InformationType',property:'infoType',type:'special',children:'infoTypeChildren',param:'infoTypeCode',宽度：'',fackItem:'a'},{title:'ServiceName',property:'serviceName',type:'special',children:'serviceChildren',param:'serviceId',width:'',fackItem:'b'},{title:"DataSource",property:'sourceName',type:'special',children:'sourceChildren',param:'dataSourceId',width:'',fackItem:'c'},{标题:"ServiceVersion",property:'serviceVersion',width:''},{title:"ServiceDescription",property:'description',width:''},{title:"注册单元",property:'register',width:''},{title:"注册时间",property:'registerDate',width:''},{title:"服务状态",property:'status',type:'state',width:''},]上面是两个表共享的对象，其他字段可以忽略，直接看title属性width这三个字段再看HTML代码内容{{item.title}} 这是头表的简化代码。使用angular的*ngFor属性，遍历tabHead循环出td，将td的样式宽度设置为tabHead中width的值
同样，这是body形式的简化代码，同样使用angular的*ngFor属性，遍历tabHead循环outtdand设置td的样式宽度为tabHead中width的值。但是在外层增加了一个tableData循环，其字段如下exportclassServiceContentListModel{dataSourceId?:string;sourceChildren?:Array