如何固定table的第一行,不随纵向滚动条滚动,但能横向滚动

author author     2023-04-17     507

关键词:

参考技术A *
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>

cssdiv在页面中纵向固定,不随滚动条滚动,横向随滚动条滚动

纵向固定在左上角,横向可以滚动可能会分3种情况:1、浏览器的窗体滚动,这个估计每个浏览器都不一样,记得以前IE中纵向不超屏幕,横向超过一屏,用滚轮就横着滚,没测试。2、iframe中的窗体滚动。3、div中的内容overflow滚... 查看详情

如何让背景图片固定不随滚动条滚动

参考技术A1、打开html开发软件,新建一个html代码页面。2、在html代码页面的<body>标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图3、设置背景图片样式。在<title>标签... 查看详情

有两个div,一个父级,一个子级,父级有滚动条,样式如何写才能让子级的div固定在顶部,不随滚动条

有两个div,一个父级,一个子级,父级有滚动条,样式如何写才能让子级的div固定在顶部,不随滚动条滚动参考技术A父级加上position:relative;子集加上:position:absolute;top:0;本回答被提问者和网友采纳 参考技术B可以加上margin-top:... 查看详情

table怎么设置横向滚动条但纵向不要

...览器默认的宽(width)的的范围,就会产生横向滚动条,纵向滚动条产生的原因也是一样的。关于滚动条的控制,在实现上是这样的无框架页面的控制:(非常之简单,但未于NC下测试过。那位测试过请告之。)框架页面:在D4下,... 查看详情

elementuitable首行固定

...;https://www.cnblogs.com/veinyin/p/12101047.html 需求描述:首行固定,吸附在表头下,数据多时其他行可以纵向滚动 方案一 两个表格拼凑第一个表格展示头部和固定行第二个表格展示其它数据示意图如下 适用场景:仅横向... 查看详情

怎么让div内的某个元素固定不随div的滚动条的滚动而滚动?

style="position:fixed;"用这个属性,然後用top,left,bottom,right直接定位到div的裏面,这样就是裏面的的元素但不会随著div的滚动而滚动参考技术A你的意思是要和百度里面的最上面的那个一样?永远停在上面的那种?是的话position:f... 查看详情

怎么让div内的某个元素固定不随div的滚动条的滚动而滚动?

style="position:fixed;"用这个属性,然後用top,left,bottom,right直接定位到div的裏面,这样就是裏面的的元素但不会随著div的滚动而滚动参考技术A你的意思是要和百度里面的最上面的那个一样?永远停在上面的那种?是的话position:f... 查看详情

关于css的,如何让多个(不确定的个数)图片显示在一行,且有横向滚动条,无纵向滚动条

<div>        这里要加 overflow-x 这个属性    <div>    这里是所有图片的容器        <img>        ... 查看详情

table固定表头固定列实现横向纵向滚动

...只有tbody,分别把两个table用div包裹起来,设置有tbody的div固定高度,超出overflow:scroll;至于横向滚动的问题,可以设置position:sticky,然后根据左右浮动的个数及对应列所在的index,计算left或者right的长度。因为table里thead和tbody本... 查看详情

table左边固定-底部横向滚动条

是日有需求,曾探讨过table表单头部、尾部固定不动,中间内容随着滚动条的滚动而变化。整合资料之际,发现有很多表格,表单展现中,横向数据很多、很长,不方便查看。则,横空霹雳出了,此款:table表单左边固定,底部... 查看详情

css+div如何将淘宝客服悬浮固定在右下角,不随滚动条移动。

一般情况下都是用CSS的fixed固定定位,但不兼容IE6,在IE6下,用absolute方式。下面给出简单的兼容写法代码实现。仅供参考:<style>    *margin:0px; padding:0px;    body height:2000px    div width:100px; height:100px; background:#ccc; pos... 查看详情

表格列固定

<!doctypehtml><htmldir="ltr"lang="zh-CN"><head><metacharset="utf-8"/><title>类似excel的滚动机制,当移动滚动条时固定table的第一行和第一列</title><styletype="text/css">#table-container{ 查看详情

table的滚动和行定位效果

tabel的表头信息固定 而内容滚动;实现:当div的内容超过样式设置的width、height时会出现相应的横向、纵向滚动条。利用这个让table的内容超过规定值时,自动出现滚动条。而设置两个table;一个为表头信息、一个为内容。内容... 查看详情

解决table固定行和列,导致滚动条显示

实现了列固定,头部行固定左侧,右侧两个div,左侧滚动,右着滚动,但是左侧会出现滚动条使用鼠标滚动事件监听左侧 //滚动事件varscrollFunc=function(e){e=e||window.event;if(e.wheelDelta==120||e.detail==-3){$(‘#cl_freeze‘).scrollTop($(‘#cl_fr... 查看详情

如何让table表头随着滚动条滚动?达到覆盖效果。js、jq大神求帮忙。

如何让table表头随着滚动条滚动?就行Excel的冻结表头那样。求代码。需求如图。蓝色的那块是表头。滚动条往下拉一格。表头继续覆盖了第二格。(我的表格高是40px.意思是说每次滚动条移动40px)意思就是说要让表头跟随滚动条的... 查看详情

elementuiel-table固定列后,滚动条在固定列的位置上无法滚动的问题

参考技术A场景:我们项目在使用elementUI的el-table时,固定了好几列,偶然发现滚动条在固定列的位置无法滚动,其他列的位置是可以滚动的,由于固定列比较多,滚动条滚不动太影响操作了。原因:研究下发现,是由于固定列把... 查看详情

实现固定表头和表列的table组件

...比较多时,为了查看方便,希望能在纵向滚动时固定表头,在横向滚动时在左边或右边固定特定表列,这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情

elementui的el-table在用fixed且有滚动条时出现的样式问题总结

参考技术A1.在el-table的一些列加fixed后,固定列的横向滚动条无法拖动问题:(1)加样式如果有合计行的,适当增加bottom的值(2)加上样式后,因为固定列有bottom:17px的距离,会导致不固定列的滚动到底部后,与左侧发生错位这时需加... 查看详情