表格表头随滚动条滚动

1.所需文件

fixed_table_rc.css

sortable_table.js

fixed_table_rc.js

2.表格样式

<table id="fixed" class="detailTable tableValuation taskTable" >
<thead>
<tr class="top_valuation trBg" style="border:none;">
<th style="border-left:none;"><div>序号</div></th>
<th><div  class="centerList" >物料类别</div></th>
<th><div  class="centerList" >实物名称</div></th>
<th><div  class="centerList" >型号</div></th>
<th><div  class="centerList" >单位</div></th>
<th><div  class="centerList" >入库数量</div></th>
<th><div  class="centerList" >领用入库数量</div></th>
<th><div  class="centerList" >借用入库数量</div></th>
<th><div  class="centerList">采购入库数量</div></th>
<th><div  class="centerList" >租用入库数量</div></th>
<th><div  class="centerList" >调拨入库数量</div></th>
<th><div  class="centerList">出库数量</div></th>
<th><div  class="centerList" >一般出库数量</div></th>
<th><div  class="centerList" >领用退还出库数量</div></th>
<th><div  class="centerList" >借用退还出库数量</div></th>
<th><div  class="centerList" >租用退还出库数量</div></th>
<th><div  class="centerList" >调拨出库数量</div></th> 
<th><div  class="centerList" >退库数量</div></th> 
<th><div  class="centerList" >库存数量</div></th> 
<th><div >盘点数量</div></th> 
<th><div >盘点结果</div></th> 
<th><div >备注</div></th>
</tr>
</thead>
<tbody  id="detailTable"> 
 </tbody>

</table>

3.前端js

$('#fixed').fxdHdrCol({
//fixedCols: 2,
width: "100%",
height:bodyHeight-titleTop-tableStyle-titleHeight-divCenter-15,
colModal: [
{ width: 100, align: 'center' },
{ width: 300, align: 'center' },
{ width: 300, align: 'center' },
{ width: 250, align: 'center' },
{ width: 100, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 120, align: 'center' },
{ width: 200, align: 'center' },
{ width: 250, align: 'center' },
]

}); 

4.效果