查询结果的列表表头固定（冻结）的实现纪实

最新推荐文章于 2023-07-10 17:40:43 发布

ylhsuper

最新推荐文章于 2023-07-10 17:40:43 发布

阅读量462

点赞数

本文链接：https://blog.csdn.net/ylhsuper/article/details/62233487

版权

最近在做客服工单项目时，查询结果的表格数据是后台查数据库获取的。列表比较多，纵向高度根据屏幕自适应调节，所以会出现纵向滚动条，而横向呢，如果屏幕宅的话，表格列数多，会让表格外面的div层出现滚动条，拖动纵向滚动条的时候，要求表头固定，拖动横向滚动条的时候，表头也跟着横向动。

下面提供思路：供大家分享下。

<style type="text/css">
*{
	margin:0;
	padding:0;
}
td{
	width:200px;
	line-height:30px;
}
table{
	width:2000px;
}
#th{
	background-color:#888888;
	position:absolute;
	width:2000px;
	height:30px;
	top:0;
	left:0;
}
#wrap{
	position:relative;
	padding-top:30px;
	width: 500px;
	height: 600px;
	overflow: auto;
}
</style>

<!-- asp.net中，后台动态产生的table，如果行数过多，就会有纵向滚动条，现在想在出现纵向滚动条时，拖动纵向滚动条，表头能不随纵向滚动条滚动。

但是当出现横向滚动条时，表头能横向滚动。 -->

<div id="wrap" οnscrοll="func()">
	<table id="table">
		<tr id="th">
			<td>001</td>
			<td>002</td>
			<td>003</td>
			<td>004</td>
			<td>005</td>
			<td>006</td>
			<td>007</td>
			<td>008</td>
			<td>009</td>
			<td>0010</td>
		</tr>
		<tr>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
			<td>内容1</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
			<td>内容</td>
		</tr>
	</table>
	<!-- <div style="height:2000px;"></div> -->
</div>

<script type="text/javascript">
function func(){
	var obj_wrap = $("#wrap");
	var obj_th=$("#th");
	// console.log(obj_wrap.scrollTop());
	// console.log(obj_wrap.scrollLeft());
	if(obj_th){
		obj_th.css({"top":obj_wrap.scrollTop()});
	}
}
</script>

下面是其他的测试demo，可以参考吓：

<div οnscrοll="demo()" id="test" style="margin-top:20px;width:300px;height:200px;overflow:auto;">
		<P style="width:500px;">11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
		<P>11</P>
	</div>
	<script>
		var test = $("#test");
		function demo(){
			alert(test.scrollTop())
			console.log(test.scrollTop());
			console.log(test.scrollLeft());
		};
	</script>

ylhsuper

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
查询结果的列表表头固定（冻结）的实现纪实

最近在做客服工单项目时，查询结果的表格数据是后台查数据库获取的。列表比较多，纵向高度根据屏幕自适应调节，所以会出现纵向滚动条，而横向呢，如果屏幕宅的话，表格列数多，会让表格外面的div层出现滚动条，拖动纵向滚动条的时候，要求表头固定，拖动横向滚动条的时候，表头也跟着横向动。下面提供思路：供大家分享下。*{ margin:0; padding:0;}td{ width:200px
复制链接

扫一扫