表头不动的表格（重置）

<meta charset='utf-8'>
<style>
body{
	background:#d9d9d9;
}
.windows{
	position: absolute;
	left: 50%;
	top: 50%;
	width:800px;
	height:600px;
	margin-left:-400px;
	margin-top:-300px;
	background:white;
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.b{
	position:absolute;
	top:100px;
	width:100%;
	height:450px;
	background:red;
}
.header{
	background:yellow;
	width:100%;
	height:50px;
	overflow:hidden;
}
.tableHeader{
	width:1000px;
	height:100%;
	background:blue;
	color:red;
}
.tableTheader{
	position:relative;
	width:100%;
	height:100%;
}
.tableTheaderTr{
}
.tableTheaderTd{
}
.body{
	background:blue;
	width:100%;
	height:400px;
	overflow:auto;
}
.tableBody{
	width:1000px;
	height:800px;
	background:red;
	color:blue;
}
.tableTbody{
	width:100%;
	height:100%;
}
.tableTbodyTr{
}
.tableTbodyTd{
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<div class='windows'></div>
<script>
	$(document).ready(function(){
		var b = $('<div class="b"></div>');
		
		var header = $('<div class="header"></div>');
		var tableHeader = $('<div class="tableHeader"></div>');
		var tableTheader = $('<table class="tableTheader"></table>')
		for(row=1;row<=1;row++){
			var tableTheaderTr = $('<tr class="tableTheaderTr"></tr>');
			for(col=1;col<=20;col++){
				var tableTheaderTd = $('<td class="tableTheaderTd">'+col+'</td>');
				tableTheaderTr.append(tableTheaderTd);
			}
			tableTheader.append(tableTheaderTr);
		}
		tableHeader.append(tableTheader);
		header.append(tableHeader);
		b.append(header);
		
		var body = $('<div class="body"></div>');
		var tableBody = $('<div class="tableBody"></div>');
		var tableTbody = $('<table class="tableTbody"></table>');
		for(row=1;row<=10;row++){
			var tableTbodyTr = $('<tr class"tableTbodyTr"></tr>');
			for(col=1;col<=20;col++){
				var tableTbodyTd = $('<td class="tableTbodyTd">'+col+'</td>');
				tableTbodyTr.append(tableTbodyTd);
			}
			tableTbody.append(tableTbodyTr);
		}
		tableBody.append(tableTbody);
		body.append(tableBody);
		b.append(body);
		
		$('.windows').append(b);
		
		$(".body").scroll(function(){
			var left = $(this)[0].scrollLeft;
			$(".tableTheader").css({"left":-left,});
		});  
	});
</script>

<meta charset='utf-8'>
<style>
*{
	font-family:微软雅黑;
}
body{
	background:#d9d9d9;
}
.windows{
	position: absolute;
	left: 50%;
	top: 50%;
	width:1000px;
	height:600px;
	margin-left:-500px;
	margin-top:-300px;
	background:white;
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.b{
	position:absolute;
	top:100px;
	width:100%;
	height:450px;
}

.header{
	height:50px;
	overflow:hidden;
}
.tableTheader{
	position:relative;
	width:3000px;
	height:100%;
	background:#78b5ec;
	color:#114784;
}
.tableTheaderTr{
}
.tableTheaderTd{
	width:150px;
	text-align:center;
}

.body{
	height:400px;
	overflow:auto;
}
.tableTbody{
	width:3000px;
	background:#a7ceed;
	color:#0b4a9a;
}
.tableTbodyTr{
}
.tableTbodyTd{
	height:150px;
	width:150px;
	text-align:center;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<div class='windows'></div>
<script>
	$(document).ready(function(){
		var b = $('<div class="b"></div>');
		
		var header = $('<div class="header"></div>');
		var tableTheader = $('<table class="tableTheader"></table>')
		for(row=1;row<=1;row++){
			var tableTheaderTr = $('<tr class="tableTheaderTr"></tr>');
			for(col=1;col<=20;col++){
				var tableTheaderTd = $('<td class="tableTheaderTd">标题'+col+'</td>');
				tableTheaderTr.append(tableTheaderTd);
			}
			tableTheader.append(tableTheaderTr);
		}
		header.append(tableTheader);
		b.append(header);
		
		var body = $('<div class="body"></div>');
		var tableTbody = $('<table class="tableTbody"></table>');
		for(row=1;row<=10;row++){
			var tableTbodyTr = $('<tr class="tableTbodyTr" style="background:#eaf3fa"></tr>');
			if(row%2)tableTbodyTr = $('<tr class="tableTbodyTr" style="background:#d1e4f3;"></tr>');
			for(col=1;col<=20;col++){
				var tableTbodyTd = $('<td class="tableTbodyTd">内容'+col+'</td>');
				tableTbodyTr.append(tableTbodyTd);
			}
			tableTbody.append(tableTbodyTr);
		}
		body.append(tableTbody);
		b.append(body);
		
		$('.windows').append(b);
		
		$(".body").scroll(function(){
			var left = $(this)[0].scrollLeft;
			$(".tableTheader").css({"left":-left,});
		});  
	});
</script>