table表头行不动

今天遇到一个问题怎么使表头行不动

如图：

仔细思考之后发现没有此类的参考怎么办呢？

解决方案是使用俩个table：1.一个table是表头，一个table是下面的

具体代码如下：

//html代码：

</div>
<div id="createtable1" style="position:relative;position:absolute; top:20%; left:20px; width: 98%; height: auto;">
</div>  
<div id="createtable" style="position:relative;position:absolute; top:28%; left:20px; width: 99%; height: 100%;">
</div>  

具体js代码：因为我的table是动态生成的

function CreateTable(Count) {

//动态生成table
var table1 = $("<table id='bodytable' width='99%' heigth='30%' border='1px'>");
table1.appendTo($("#createtable1"));//table放入div中

var tr = $("<tr style='color:#03D5DD;font-weight: bold;height:10%;_position:absolute;font-size:14px'></tr>");//动态创建tr
tr.appendTo(table1);//tr加入table
var th = $("<th width='10%' style='BORDER-RIGHT: #f6f6f6 0px solid; text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px;' height='20px'>"
+ '门店名称' + "</th>");//动态生成td
th.appendTo(tr);//td加入tr
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px' >" + '状态'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + 'pc'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + '网络'
+ "</th>");
th.appendTo(tr);