table表头冻结

本文包含冻结title（thead），以及冻结前X列的实现

废话不说，上代码：

页面是这样的

<div id="result_list">
					<div id="result_contener">
						<div style="height: 30px;">
							<div id="table_label">
								<span>出样数据展现</span>  
							</div>
						</div>
						<div class="table_container">
						<div class="result_table" >
								<table class="table" id="mygoodtb"   >
								<thead >
									<tr id="mytr">
										<th nowrap>序号</th>
										<th nowrap>店面编码</th>
										<th nowrap>店面名称</th>
										<th nowrap>型号</th>
										<th nowrap>品类</th>
										<th nowrap>设备SN</th>
										<th nowrap>出样时间</th>
										<th nowrap>cpu</th>
										<th nowrap>屏幕尺寸</th>
										<th nowrap style="width: 10px;">状态描述</th>
										<th nowrap>出样开始时间</th>
										<th nowrap>出样结束时间</th>
										<th nowrap>出样计时天数</th>
										<th nowrap>出样日期</th>
									</tr>
								</thead>
								<tbody id="table_body">
									<c:forEach var="item" items="${dataList}" varStatus="status">
										<tr>
										<td nowrap>${status.index + 1 }</td>
										<td nowrap>${item.filed2}</td>
										<td nowrap>${item.filed3}</td>
										<td nowrap>${item.filed4 }</td>
										<td nowrap>${item.filed5}</td>
										<td nowrap>${item.filed6}</td>
										<td nowrap>${item.filed7 }</td>
										<td nowrap>${item.filed8}</td>
										<td nowrap>${item.filed9}</td>
										<td nowrap>${item.filed10 }</td>
										<td nowrap>${item.filed11}</td>
										<td nowrap>${item.filed12}</td>
										<td nowrap>${item.filed13}</td>
										<td nowrap>${item.filed14}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
						
						<div  class="mengban" id="mengban">
						<div id="mcontainer">
							<table class="table" id="mtable">
								<thead>
									<tr>
										<th nowrap>序号</th>
										<th nowrap>店面编码</th>
										<th nowrap>店面名称</th>
										 
									</tr>
								</thead>
								<tbody>
									<c:forEach var="item" items="${dataList}" varStatus="status">
										<tr>
											<td nowrap>${status.index + 1 }</td>
										  <td nowrap>${item.filed2}</td>
										  <td nowrap>${item.filed3}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
						</div>
						</div>
						
						
					</div>
				</div>

css文件是这样的：

#result_list {
	width: 100%;
	min-height: 300px;
	height: auto;
	overflow: hidden;
	height: auto;
	/* 	overflow:scroll; */
}
#result_contener {
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #FFF;
	margin: 0px;
	padding: 10px;
}
#result_contener {
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #FFF;
	margin: 0px;
	padding: 10px;
}

.result_table {
	position: relative;
	overflow: scroll;
	/* overflow:auto; */
	padding-left: 20px;
}


.table_container {
	position: relative;
	opacity: 1;
	filter: alpha(opacity = 100);
}

.mengban {
	position: absolute;
	top: 0px;
	left: 0px;
	overflow:hidden;
	width: auto;
	padding-left: 20px;
	opacity: 1;
	filter: alpha(opacity = 100);
	background-color: #FFF;
	z-index: 10002;
}

#mcontainer {
	overflow:hidden;
	width: 200px;
}

js代码：

页面上面的js是用require.js引用的（简而言之就是在页面中引入必要的js文件，包括jquery,d3.js,echarts,jquery-ui,jquery.floatThead插件）

注：jquery.floatThead插件是最重要的部分，下载也demo地址：http://mkoryak.github.io/floatThead/，

如果网页demo不能正常运行，那就需要先把js插件下载下来自己做demo了。

 

require.config({
	paths : {
		'jquery' : 'jquery/jquery-1.10.2',
		'd3' : 'd3/d3',
		'echarts' : 'echart/echarts.min' ,
		'jquery-ui':'jquery-ui/jquery-ui' ,
		'tf':'table/jquery.floatThead'
	}
});
 
	define([ 'jquery', 'd3','echarts','jquery-ui','tf'],function( $, d3,echarts,ui,tf) {
		return {
			 scroll_listener:scroll_listener
		};
		
		function scroll_listener(){
			var $table = $("#mygoodtb");
			var ths = $("#mytr").children("th");
			var w1 = ths.eq(0).outerWidth()
			var w2 = ths.eq(1).outerWidth()
			var w3 = ths.eq(2).outerWidth()
			$("#mcontainer").css("width",w3+w1+w2);
			$table.floatThead(
			{ position: 'absolute'}		
			);
			var $table2 = $("#mtable");
			$table2.floatThead(
			{ position: 'absolute'}	
			);
		}
}
);

然后我们就可以在页面上面看到，如果页面整体滚动条下拉，表格的thead被冻结，前三列被冻结的效果