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

Web 开发 > HTML(CSS)
收藏 回复
[问题点数：60分，结帖人maniacstone]
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30
结帖率 100%
需求：
asp.net中，后台动态产生的table，如果行数过多，就会有纵向滚动条，现在想在出现纵向滚动条时，拖动纵向滚动条，表头能不随纵向滚动条滚动。但是当出现横向滚动条时，表头能横向滚动。
不需要所有浏览器通过，能支持ie7，8就行。

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

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


请各位高手指点。

注：
请附上实际运行通过的代码，如果分数不够，我可以加分。
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30
强大的csdn，难道此题无解？
只看TA 引用 举报 #1得分 0
更多帖子
私信 空间 博客
Atai-Lu
等级
本版专家分：34199
CSDN其实不强大
只看TA 引用 举报 #2得分 10
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30
继续求解。
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30
难道真的沉了？
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
潮起潮落
等级
本版专家分：11494
勋章
Blank
蓝花 2013年7月 Web 开发大版内专家分月排行榜第三
兼容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>
只看TA 引用 举报 #5得分 25
更多帖子
私信 空间 博客
潮起潮落
等级
本版专家分：11494
勋章
Blank
蓝花 2013年7月 Web 开发大版内专家分月排行榜第三
额。勘误勘误。
“主要是非IE的没有window.scroll”是不对的。刚才试了下没效果是因为加和不加DTD的情况下，ie/ff对document.body.scrollTop的态度和chrome正相反。
如果只用IE的，LS那个版本就可以。

如果要兼容。
把所有document.documentElement.scrollTop
换成
(document.documentElement.scrollTop || document.body.scrollTop)
就可以兼容chrome和ff了。
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30
引用 6 楼 konghulu 的回复:
额。勘误勘误。
“主要是非IE的没有window.scroll”是不对的。刚才试了下没效果是因为加和不加DTD的情况下，ie/ff对document.body.scrollTop的态度和chrome正相反。
如果只用IE的，LS那个版本就可以。

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


我发下我现在的布局，麻烦你帮我调下。或者你加下我QQ，可否？
请回复。
只看TA 引用 举报 #7得分 0
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30
源文件太大了，这边粘贴不上。
我的是  table 位于 一个div里。
但是table的内容，都是后台动态产生的，如果把表头和表体分开，由于表体是靠动态产生的控件撑大的，所以表头所在div和表体所在div的宽度会不一致。
这个比较难弄。
只看TA 引用 举报 #8得分 0
更多帖子
私信 空间 博客
maniacstone
等级
本版专家分：30




<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长度限制，无法粘贴，麻烦你重现下。帮我具体调下。
只看TA 引用 举报 #9得分 0
更多帖子
私信 空间 博客
潮起潮落
等级
本版专家分：11494
勋章
Blank
蓝花 2013年7月 Web 开发大版内专家分月排行榜第三
表头表体合在一块了，包在一个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>
只看TA 引用 举报 #10得分 25
收起
收藏 回复
maniacstone

等级：

关注 私信 TA的帖子
bootstrap table 表头固定 、冻结列、横向纵向滚动条

前提：引入对应的js,css&lt;link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css"&.../kaoqin/js/bootstrap-table/boot

实现表头纵向滚动固定横向跟随

bootstrap插件如bootstrap table等，但最近项目中由于想更加灵活调整式样设计，所以打算自己实现分页表格，由于项目中经常需要展示大量的数据，这时遇到的第一个问题就是如何实现表头标题行在纵向滚动时固定，横向...

gridview固定表头实例----横向滚动 纵向滚动

情况描述： 页面中有2个tab，第一个tab是gridview绑定数据，第2个tab是chart绑定 问题1. gridview表头固定问题 解决 设置属性th { position:relative ;} 问题2. gridview纵向滚动条向下拉一点，切换到第2个tab,再...

table表格表头固定 tbody添加纵向滚动条 并且隐藏滚动条

table表格表头固定 tbody添加纵向滚动条 并且隐藏滚动条 /**表格*/ .road_table thead, .road_table tbody tr { display: table; width: 100%; table-layout: fixed; } /*chrome 和Safari----隐藏滚动条*/ ....

div table 滚动条 定住第一行

div下有个table，可以进行上下或左右移动滚动条，我(ˇ?ˇ) 想～把table中的表头（第一行）定住，请问怎么弄？感谢高手们指教......

gridview固定表头--纵向固定横向滚动

样式：      th{ position:relative;  top:expression(this.offsetParent.scrollTop);   }   页面： position:relative;width:100% ;overflow:scroll;margin:0px;padding:0px;"> he

HTML表头可以随表单内容横向滚动，内容可横可纵滚动

HTML div实现表头可以随表单内容横向滚动，表单内容可横可纵滚动

一种局部固定表头的实现方案（横向可跟随内容一同滚动，纵向锁定表头）

1.为了固定表头我们需要先把表格的head和tbody切分到两个table里： <table class="table-head"></table>和 <table class="table-body"></table>里。 2.将table-body放在一个table-body-box...

Vue +原生固定table表头，body上下滚动，内容对应与横向滚动条

其实table的x轴也可以设置成超出滚动条，这样的话，就自定义了个表头固定，表体滚动显示，这个table x轴超出滚动。 解决思路 1、采用两个table列表，他们的数据一模一样，以保证他们的高、宽、内容全部都完全一致； ...

table表头固定表体滚动

实际的项目中需要用到弹出框包含表格时，万一表格很长不方便...原理：外面一个大的div，包裹两个div>tabel,上面一个div原来模拟固定的表头，下面的div设置overflow-y:auto; 其中用到 colgroup 标签，点我了解colgrou

纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了 由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用...

table内容出现滚动条和表头对齐问题

table内容出现滚动条和表头对齐

表头、表体分开的表格，添加横向和纵向滚动条的方法小结！

但是有时候项目中的实际情况是，表头和标题的制作是分开进行，还有时候表格是在js中画出来的，用来制作符合需求的表格以展示数据，这样就会造成有很多时候画面不够大添加横向和纵向滚动条失败的情况。下面就以我做的...

bootstrap-table用法-头部不滚动的实现

先上html代码&lt;div id="test" class="table-responsive" style="padding: 0;overflow:auto;"&gt;...table id="...table table-nowrap"&gt;&

记一次el-table内容溢出元素框时不出现滚动条问题

博主的表用使用的是elementui的el-table标签，发现此时的表格内容已经溢出了元素框，但是并没有出现滚动条。博主被这个问题困扰了两天，后来终于找到了问题原因和解决方法。 问题原因： 简单贴一下原布局样式： //...

[总结]DataGrid 固定表头实现（纵向和横向滚动条滚动，而Header不动）

1.用Css来定制DataGrid表头HeaderStyle的cssclass属性.fixTitle{ /*background: navy; color: white;*/ position: relative; top: expression(this.offsetParent.scrollTop);}    1 &lt;DIV style=&...

表头,上下滚动时固定，左右滚动时自动对齐

重申一点:网上有很多表头固定,功能

CSS控制表头不动，表单内容滚动

要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个table里面，然后分别控制table的样式。本次不采用这种方法，而是使用table里面自带的thead和tbody属性。 首先创立一...

el-table横向滚动时表头与表体的内容速度不一致（错位）

<div class="table-overflow-x">...= '1'" :data="tableData" ref="dataTable" id="dataTable" style="width: 100%" :height="dataTableHeight" :span-method="arraySpanMethod" empty-text="暂无数据"> ...

表头固定的前提下表格添加纵向滚动条

有时候在不分页且数据多的时候就需要滚动条，或者说是下拉加载的时候也需要滚动条，但是希望在滚动的时候数据的表头固定便于理解表体。 1. 第一种，在tbody元素上进行滚动 　这种方式有个缺陷就是所有的单元格的...

记一次element-ui配置化table组件的适应性问题（横向滚动条）

复制代码大家可以发现，固定了高度的 table 不仅出现了纵向滚动条，横向滚动条也出现了（只能滚动一点点），其实宽度是足够显示的。 然后将问题在网上搜寻，查到了相关的issues github.com/ElemeF...

element table 表格滚动水平滚动条会触发竖直滚动条的加载更多 的解决办法

一、问题场景：表格过长或过高时，用element固定表头和固定列出现滚动条，当竖直

（java）请问Bootstrap的table如何设置横向滚动条？？

无法设置横向滚动条，麻烦有懂的指点一下怎么添加横向滚动条，谢谢！ 这是相关代码： div class=" bootstrap-admin-panel-content"> table class="table table-striped table-bordered" id="list-video"> ...

无比强大的GridView，表头固定，表体有滚动条可滚动

// 计算数据，完全可以从数据看取得 ICollection CreateDataSource( ) { System.Data.DataTable dt = new System.Data.DataTable(); System.Data.DataRow dr; dt.Columns.Add(new System.Data.DataColumn("学生...

html固定表头,上下滚动固定,左右滚动自动对齐,求帮忙

html固定表头,上下滚动固定,左右滚动自动对齐,求帮忙，求代码

实现表格表头固定，横纵向滚动正常

难点1--要让表格在纵向滚动的时候不随滚动条滚动 难点2--要让表格在横向滚动的时候正常滚动 只是难点1的话其实有很多个解决方案，这里暂列两个，第2个可解决难点1和难点2 第一个解决方案，使用两个table，表头单....

固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>...

固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据……都完美！ 背景：由于我司行业方向，需要很多数据报表，则table是当仁不让...

Jquery datatables插件实现表头固定内容可滚动列表

   最近用Jquery datatables Plugin+freemarker+Struts2...由于在整个系统要用到这个组件的功能模块所涉及的数据量不大，为了便于直观，统一不做分页，而是通过滚动条来显示超出显示区域的内容。但是datatabl...

html复杂表格，横向多级表头，纵向多级表头

table class="table" cellpadding="1" cellspacing="1" border="1"> <tr> <th colspan="3" rowspan="2">用电分类</th> <!-- colspan="2" 表示这一列占2列 --> <t

jsp页面table表头固定-freezeheader

该插件兼容firefox，charome，safari，ie10以上的版本。 1.导入jquery与freezeheader的包...4.在第3步table表与拼接完成，页面完成渲染后，实现table表头固定； 在 ajax success: function(data){ //先拼接table...

相关热词 c# 页面转换成pdf c# 轨迹回放 c#图片热点 c#检测串口断开 c# unity上下滑动 c#和g++编译器连接 c# rsa 公钥加密 c# 水晶报表 自动下移 c#dll类库 vs c# 窗口句柄