如何固定table的第一行（表头），不随纵向滚动条滚动，但能横向滚动

maniacstone 2011-03-22 11:07:58
需求：
asp.net中，后台动态产生的table，如果行数过多，就会有纵向滚动条，现在想在出现纵向滚动条时，拖动纵向滚动条，表头能不随纵向滚动条滚动。但是当出现横向滚动条时，表头能横向滚动。
不需要所有浏览器通过，能支持ie7，8就行。

我自己写了一点样式（table所在div的样式 ）

style="width:100%; overflow: auto; height: 600px;"


请各位高手指点。

注：
请附上实际运行通过的代码，如果分数不够，我可以加分。
...全文
9159 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
潮起潮落 2011-03-23
  • 打赏
  • 举报
 回复
兼容IE6-8。稍微改改就可以兼容全部主流，主要是非IE的没有window.scroll，可以用计时器定时计算scrollTop来模拟。有需要的话再说。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>数据栏百分比动画显示</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta name="author" content="Hulu">

<style type="text/css">

*{

	margin:0;

	padding:0;

}

td{

	width:200px;

	line-height:30px;

}

table{

	width:2000px;

}

#th{

	background-color:#888888;

	position:absolute;

	height:30px;

	top:0;

	left:0;

}

#tb{

	margin-top:30px;

}

</style>

<script type="text/javascript">

var pre_scrollTop=0;//滚动条事件之前文档滚动高度

var pre_scrollLeft=0;//滚动条事件之前文档滚动宽度

var obj_th;



window.onload =function () {

	pre_scrollTop=document.documentElement.scrollTop;

	pre_scrollLeft=document.documentElement.scrollLeft;

	obj_th=document.getElementById("th");

};

window.onscroll = function(){

	if(pre_scrollTop != document.documentElement.scrollTop){

		//滚动了数值滚动条

		pre_scrollTop=document.documentElement.scrollTop;

		if(obj_th){

			obj_th.style.top=document.documentElement.scrollTop;

		}

	}

	else if(pre_scrollLeft != document.documentElement.scrollLeft){

		//滚动了水平滚动条

		pre_scrollLeft=document.documentElement.scrollLeft;

	}

};

</script>

</head>

<body>

<table id="th" cellpadding="0" cellspacing="0">

	<tr>

		<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>

</table>

<table id="tb" cellpadding="0" cellspacing="0">

	<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>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>

</html>
maniacstone 2011-03-23
  • 打赏
  • 举报
 回复 




<body >

        <div class="body">

            <!-- 内容页 -->

            <div id="divContent">

                <div id="divCPH" style="width: 100;">

           <div id="ctl00_cphContent_Panel2">

	<fieldset>

		<legend>

			输入项

		</legend>

        <div id="ctl00_cphContent_divSpecial" style="width: 100%; overflow: auto; height: 600px;" >

            <div id="ctl00_cphContent_divHeader" style="z-index:100000;"><table cellspacing="0"   ><tr style="background-color:#5D7B9D;Font-Bold:True; ForeColor:White;" class="fixTitle" ><td style="width:60px;border:solid #5D7B9D 1px;"  >内容</td><td style="border:solid #5D7B9D 1px;width:60px;" > 文化部重点院团资金</td><td style="border:solid #5D7B9D 1px;width:60px;" > 退休专项</td><td style="border:solid #5D7B9D 1px;width:60px;" > 舞美仓库租赁</td><td style="border:solid #5D7B9D 1px;width:60px;" > 老艺术家</td><td style="border:solid #5D7B9D 1px;width:60px;" > 大修专项</td><td style="border:solid #5D7B9D 1px;width:60px;" > 残疾人基金</td><td style="border:solid #5D7B9D 1px;width:60px;" > 设备购置</td><td style="border:solid #5D7B9D 1px;width:60px;" > 办公设备更新</td><td style="border:solid #5D7B9D 1px;width:60px;" > 抚恤金</td><td style="border:solid #5D7B9D 1px;width:60px;" > 演出补贴资金</td><td style="border:solid #5D7B9D 1px;width:60px;" > 办公用房租赁</td><td style="border:solid #5D7B9D 1px;width:60px;" > 补充公用经费</td><td style="border:solid #5D7B9D 1px;width:60px;" > 市管保健</td><td style="border:solid #5D7B9D 1px;width:60px;" > 物业管理费</td><td style="border:solid #5D7B9D 1px;width:60px;" > 局域网购置</td><td style="border:solid #5D7B9D 1px;width:60px;" > 摄录设备购置</td><td style="border:solid #5D7B9D 1px;width:60px;" > 保留作品生产费用</td><td style="border:solid #5D7B9D 1px;width:60px;" > 新创作品研发费用</td><td style="border:solid #5D7B9D 1px;width:60px;" > 基本设备维护更新费用</td><td style="border:solid #5D7B9D 1px;width:60px;" > 考核奖励</td><td style="border:solid #5D7B9D 1px;width:60px;" > 领军人物培养资金</td><td style="border:solid #5D7B9D 1px;width:60px;" > 京剧专项演出活动经费</td><td style="border:solid #5D7B9D 1px;width:60px;" > 人才专项</td><td style="border:solid #5D7B9D 1px;width:60px;" > 成败萧何</td><td style="border:solid #5D7B9D 1px;width:60px;" > 京剧《梅妃》</td><td style="border:solid #5D7B9D 1px;width:60px;" > 抢救传承麒派艺术</td><td style="border:solid #5D7B9D 1px;width:60px;" > 李玉如艺术资料抢救</td><td style="border:solid #5D7B9D 1px;width:60px;" > 红梅奖</td><td style="border:solid #5D7B9D 1px;width:60px;" > 八艺节</td><td style="border:solid #5D7B9D 1px;width:60px;" > 京昆文化讲坛</td><td style="border:solid #5D7B9D 1px;width:60px;" > 高雅艺术进校园</td><td style="border:solid #5D7B9D 1px;width:60px;" > 演出补贴</td><td style="border:solid #5D7B9D 1px;width:60px;" > 小吏之死、惑</td><td style="border:solid #5D7B9D 1px;width:60px;" > 巴黎圣母院</td><td style="border:solid #5D7B9D 1px;width:60px;" > 走马换将</td><td style="border:solid #5D7B9D 1px;width:60px;" > 梨园擂台</td><td style="border:solid #5D7B9D 1px;width:60px;" > 文化记忆－京剧展览</td><td style="border:solid #5D7B9D 1px;width:60px;" > 对话京剧－京剧明星讲演</td><td style="border:solid #5D7B9D 1px;width:60px;" > 艺术普及教育</td><td style="border:solid #5D7B9D 1px;width:60px;" > “上京牌”灯具</td><td style="border:solid #5D7B9D 1px;width:60px;" > 京剧技导</td><td style="border:solid #5D7B9D 1px;width:60px;" > 海上梨园群星谱</td><td style="border:solid #5D7B9D 1px;width:60px;" > 非物质文化遗产保护</td><td style="border:solid #5D7B9D 1px;width:60px;" > CCTV青年电视大赛</td><td style="border:solid #5D7B9D 1px;width:60px;" > 第五届中国京剧艺术家</td><td style="border:solid #5D7B9D 1px;width:60px;" > 国家大剧院开幕演出</td><td style="border:solid #5D7B9D 1px;width:60px;" > 第十届中国戏剧节演出</td><td style="border:solid #5D7B9D 1px;width:60px;" > 青年创作人员培训</td><td style="border:solid #5D7B9D 1px;width:60px;" > 纪念“曹”剧诞生20周年</td><td style="border:solid #5D7B9D 1px;width:60px;" > 盘丝洞</td><td style="border:solid #5D7B9D 1px;width:60px;" > 西厢记</td><td style="border:solid #5D7B9D 1px;width:60px;" > 唐琬</td><td style="border:solid #5D7B9D 1px;width:60px;" > 青年培训</td><td style="border:solid #5D7B9D 1px;width:60px;" > 青年演员学习培训</td><td style="border:solid #5D7B9D 1px;width:60px;" > 《王子复仇记》修改</td><td style="border:solid #5D7B9D 1px;width:60px;" > 万里行</td><td style="border:solid #5D7B9D 1px;width:60px;" > 三十年河东</td><td style="border:solid #5D7B9D 1px;width:60px;" > 关公</td><td style="border:solid #5D7B9D 1px;width:60px;" > 小丑挑梁</td><td style="border:solid #5D7B9D 1px;width:60px;" > 校园京韵</td><td style="border:solid #5D7B9D 1px;width:60px;" > 中尉</td><td style="border:solid #5D7B9D 1px;width:60px;" > 周信芳115周年</td><td style="border:solid #5D7B9D 1px;width:60px;" > 少儿京剧普及教育</td><td style="border:solid #5D7B9D 1px;width:60px;" > 京剧技导实习剧目</td><td style="border:solid #5D7B9D 1px;width:60px;" > 海上升明月京剧古诗词演唱会</td><td style="border:solid #5D7B9D 1px;width:60px;" > 拾漏补缺</td><td style="border:solid #5D7B9D 1px;width:60px;" > 南英北杰</td><td style="border:solid #5D7B9D 1px;width:60px;" > 流派班</td><td style="border:solid #5D7B9D 1px;width:60px;" > 戏剧电影《曹操与杨修》</td><td style="border:solid #5D7B9D 1px;width:60px;" > 成败萧何</td><td style="border:solid #5D7B9D 1px;width:60px;" > 离休专项</td><td style="border:solid #5D7B9D 1px;width:60px;" > 非专项</td><td style="border:solid #5D7B9D 1px;width:60px;" > 潘月樵</td><td style="border:solid #5D7B9D 1px;width:60px;" > 映山红</td></tr></table></div>


这是表头信息。
表主体信息为 第一列是 名称，其余列全部是text 宽度为50
由于csdn长度限制，无法粘贴，麻烦你重现下。帮我具体调下。
maniacstone 2011-03-23
  • 打赏
  • 举报
 回复
源文件太大了，这边粘贴不上。
我的是 table 位于 一个div里。
但是table的内容，都是后台动态产生的，如果把表头和表体分开，由于表体是靠动态产生的控件撑大的，所以表头所在div和表体所在div的宽度会不一致。
这个比较难弄。
maniacstone 2011-03-23
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 konghulu 的回复:]
额。勘误勘误。
“主要是非IE的没有window.scroll”是不对的。刚才试了下没效果是因为加和不加DTD的情况下，ie/ff对document.body.scrollTop的态度和chrome正相反。
如果只用IE的，LS那个版本就可以。

如果要兼容。
把所有document.documentElement.scrollTop
换成
(document.documentEle……
[/Quote]

我发下我现在的布局，麻烦你帮我调下。或者你加下我QQ，可否？
请回复。
潮起潮落 2011-03-23
  • 打赏
  • 举报
 回复
表头表体合在一块了，包在一个id为wrap的div里。你看下。
如果还不符合的话你发站内信给我Q。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta name="author" content="Hulu">

<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;

}

</style>

<script type="text/javascript">

var pre_scrollTop=0;//滚动条事件之前文档滚动高度

var pre_scrollLeft=0;//滚动条事件之前文档滚动宽度

var obj_th;



window.onload =function () {

	pre_scrollTop=(document.documentElement.scrollTop || document.body.scrollTop);

	pre_scrollLeft=(document.documentElement.scrollLeft || document.body.scrollTop);

	obj_th=document.getElementById("th");

};

window.onscroll = function(){

	if(pre_scrollTop != (document.documentElement.scrollTop || document.body.scrollTop)){

		//滚动了竖直滚动条

		pre_scrollTop=(document.documentElement.scrollTop || document.body.scrollTop);

		if(obj_th){

			obj_th.style.top=(document.documentElement.scrollTop || document.body.scrollTop)+"px";

		}

	}

	else if(pre_scrollLeft != (document.documentElement.scrollLeft || document.body.scrollLeft)){

		//滚动了水平滚动条

		pre_scrollLeft=(document.documentElement.scrollLeft || document.body.scrollLeft);

	}

};

</script>

</head>

<body>

<div id="wrap">

<table cellpadding="0" cellspacing="0">

	<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>

</table>

</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>

</html>
潮起潮落 2011-03-23
  • 打赏
  • 举报
 回复
额。勘误勘误。
“主要是非IE的没有window.scroll”是不对的。刚才试了下没效果是因为加和不加DTD的情况下，ie/ff对document.body.scrollTop的态度和chrome正相反。
如果只用IE的，LS那个版本就可以。

如果要兼容。
把所有document.documentElement.scrollTop
换成
(document.documentElement.scrollTop || document.body.scrollTop)
就可以兼容chrome和ff了。
maniacstone 2011-03-22
  • 打赏
  • 举报
 回复
继续求解。
Atai-Lu 2011-03-22
  • 打赏
  • 举报
 回复
CSDN其实不强大
maniacstone 2011-03-22
  • 打赏
  • 举报
 回复
强大的csdn，难道此题无解？
maniacstone 2011-03-22
  • 打赏
  • 举报
 回复
难道真的沉了？
gridview固定表头 横向滚动 纵向固定
gridview固定表头 横向滚动 纵向固定，即拖动横向滚动条时，表头随着表体移动，纵向拖动滚动条时，表头不动，实践得出来的结果 我用的是VS2010，C#
gridview固定表头的一个具体实例----横向滚动 纵向滚动
gridview固定表头 横向滚动 纵向固定，即拖动横向滚动条时，表头随着表体移动，纵向拖动滚动条时，表头固定不动 实践中所得一个具体实例 VS2010，C#
table横向纵向表头冻结js代码
NULL 博文链接：https://yixinhu.iteye.com/blog/1668843
动态表格【悬浮表头并结合滚动条滚动表格内容】
使用bootstrap编写的动态表格【当滚动纵向的滚动条时，表格的表头处于悬浮状态，表格的内容滚动；当滚动横向的滚动条时，表格的表头和表格的内容对应着一起滚动】
利用纯css实现table固定列与表头中间横向滚动的思路和实例
主要给大家介绍了关于如何利用纯css实现table固定列与表头，中间横向滚动的相关资料，文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章