通常我们在写table表格的时候不依赖固定表头的组件很难处理固定表头，要么固定了但是列对不上，使用colgroup来固定表头就会有这种情况发生，下面我将使用另外一种方式解决此问题，且不依赖组件，原生的table就可以实现
将表头部分单独使用table包裹
<table border="0" class="formtable" cellpadding="0" style="width: 100%; display: block; overflow: auto;" cellspacing="1" id="tBCrrYfxMain_table"> <thead> <tr style="height: 30px"> <td align="center" style="width: 50px"> <label class="Validform_label"> 年度 </label> </td> <td align="center" style="width: 200px"> <label class="Validform_label"> 项目名称 </label> </td> <td align="center" style="width: 100px"> <label class="Validform_label"> 申报单位 </label> </td> <td align="center" style="width: 100px"> <label class="Validform_label"> 项目实施单位 </label> </td> <td align="center" style="width: 50px"> <label class="Validform_label"> 是否有两局文件 </label> </td> <td align="center" style="width:50px"> <label class="Validform_label"> 预算控制数 </label> </td> <td align="center" style="width:50px"> <label class="Validform_label"> 财评金额 </label> </td> <td align="center" style="width:50px"> <label class="Validform_label"> 已安排金额 </label> </td> <td align="center" style="width:50px"> <label class="Validform_label"> 剩余资金数 </label> </td> <td align="center" style="width:50px"> <label class="Validform_label"> 申请金额 </label> </td> <td align="center" style="width:50px"> <label class="Validform_label"> 安排金额 </label> </td> <td align="center" style="width:100px"> <label class="Validform_label"> 备注 </label> </td> <td align="center" style="width: 100px"> <label class="Validform_label"> 操作 </label> </td> </tr> </thead> </table>
将表体部分增加原来的表头部分
<table border="0" class="formtable" cellpadding="0" style="width: 100%; display: block; height: calc(100vh - 337px); overflow: auto;" cellspacing="1" id="tBCrrYfxMain_table"> <thead style="height: 0px;visibility: hidden;"> <tr style="height: 0px; line-height: 0;"> <td align="center" style="width: 50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 年度 </label> </td> <td align="center" style="width: 200px;height: 0px; line-height: 0;"> <label class="Validform_label"> 项目名称 </label> </td> <td align="center" style="width: 100px;height: 0px; line-height: 0;"> <label class="Validform_label"> 申报单位 </label> </td> <td align="center" style="width: 100px;height: 0px; line-height: 0;"> <label class="Validform_label"> 项目实施单位 </label> </td> <td align="center" style="width: 50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 是否有两局文件 </label> </td> <td align="center" style="width:50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 预算控制数 </label> </td> <td align="center" style="width:50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 财评金额 </label> </td> <td align="center" style="width:50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 已安排金额 </label> </td> <td align="center" style="width:50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 剩余资金数 </label> </td> <td align="center" style="width:50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 申请金额 </label> </td> <td align="center" style="width:50px;height: 0px; line-height: 0;"> <label class="Validform_label"> 安排金额 </label> </td> <td align="center" style="width:100px;height: 0px; line-height: 0;"> <label class="Validform_label"> 备注 </label> </td> <td align="center" style="width: 100px;height: 0px; line-height: 0;"> <label class="Validform_label"> 操作 </label> </td> </tr> </thead> <tbody id="bugetTable"> </tbody> </table>
主要解决方式在表体部分的
<thead style="height: 0px;visibility: hidden;">
和
height: 0px;line-height: 0;
这样就实现了原生的表头固定
本文由 admin 创作，采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2022-08-27 15:47:16