如何固定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
  • 打赏
  • 举报
回复
难道真的沉了?

61,129

社区成员

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

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