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

乐少007 乐少007     2022-08-08     560

关键词:

是日有需求,曾探讨过table表单头部、尾部固定不动,中间内容随着滚动条的滚动而变化。

整合资料之际,发现有很多表格,表单展现中,横向数据很多、很长,不方便查看。

则,横空霹雳出了,此款:table表单左边固定,底部滚动条左右滑动展现数据demo。

原理很简单:在 table外面嵌套一层div ,并且设置此父div {overflow: auto;}.此举为了出席横向滚动条

对里面的tr设置{position: relative;}相对定位 对tr里面的第一个td设置fixed

.fixed { position: fixed; background: #069DD5!important; color: #fff; width: 37px; height: 30px; line-height: 30px; }

同时为了撑开 左边固定的位置,在第二个td位置,设置一个空的td

  .td-empty { width: 60px; height: 30px; padding: 0!important; display: inline-block; } 则可实现,table表单左边第一列固定,拖动底部滚动条进行滚动显示数据。

可参考 之前写的 http://www.cnblogs.com/leshao/p/5697177.html (table头部、尾部固定;中间内容定高自适应滚动)

特此鸣谢 Ruthless。

参考了 Ruthless的 http://www.cnblogs.com/linjiqin/archive/2013/06/21/3148225.html#undefined文章,得以完善

感谢 lost,雨安合一 等

下载地址

http://files.cnblogs.com/files/leshao/table%E5%B7%A6%E8%BE%B9%E5%9B%BA%E5%AE%9A-%E5%BA%95%E9%83%A8%E6%A8%AA%E5%90%91%E6%BB%9A%E5%8A%A8%E6%9D%A1.rar

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

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

phpdatatable固定住前几列为啥会有横向滚动条,怎么去掉呢?

使用datatable固定住前五列,但是为什么这五列下面出现滚动条,怎样去掉?是不是设置了"scrollX": true追问设置的是false.vartable=$('#example2').DataTable(ordering:false,searching:false,serverSide:false,info:false,scrollY:"600px",sc... 查看详情

elementuitable横向滚动条遇到的问题汇总

参考技术A1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决:/deep/#outputTable.el-table__fixed.el-table.el-table__fixedheight:auto!important;   bottom:17px!important;  /deep/#outp... 查看详情

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

参考技术A*margin:0;padding:0;tdwidth:200px;line-height:30px;tablewidth:2000px;#thbackground-color:#888888;position:absolute;height:30px;top:0;left:0;#tbmargin-top:30px;</style><scripttype="text/javascript">varpre_scrollTop=0;//滚动条事件之前文档滚动高度varpre_s... 查看详情

elementuitable首行固定

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

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

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

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

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

antd-vue表格,固定左边第一列,设置滚动,有滚动条,第一列被隐藏(代码片段)

解决办法style里不要scoped,可以单独再加个style宽度为固定的宽度,我这里是200,和你在columns设置的宽度一样就行.ant-table-fixed-columns-in-bodydisplay:inline-block;width:200px; 查看详情

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

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

el-table固定多列问题

...“暂无数据”文本元素所在元素右侧的内边距。问题二、固定列所在位置的横向滚动条,拖动无效。如下图,红框部分拖动无效,只有拖动绿框部分,才有响应。解决办法: 查看详情

如何在 md-table 的顶部和底部添加水平滚动条?

】如何在md-table的顶部和底部添加水平滚动条?【英文标题】:Howcaniaddhorizontalscrollbarontopandbottomofmd-table?【发布时间】:2021-08-0302:19:11【问题描述】:我在表格的顶部和底部实现了一个水平滚动条,但我只能看到底部的滚动条。... 查看详情

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

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

自定义表格固定表头,随着表格内容增加出现滚动条

1、首先要固定表头就必须是两个表格组合在一起2、用一个div把两个表格包在一起,并且设置宽度,在让它可以横向滚动,overflow-x:auto3、在设置里面两个table的宽度为一样,在设置内容表格overflow-x:hidden;overflow-y:auto<!--表格表头... 查看详情

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

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

elementel-table合计时发现横向滚动条在合计上方

参考技术A解决:直接修改样式即可(防止影响全局请加scope,然后再样式穿透::v-deep)参考:elementel-table合计在横拉滚动条的下面,正确展示应该是滚动条在合计下面 查看详情

00011-layui表格table列固定宽,且超出屏幕时横向滚动(代码片段)

vartableIns=table.render(elem:‘#taskOptLogListTable‘,url:ctx+‘/task/taskOptLog/query‘,error:admin.error,cellMinWidth:80,toolbar:‘#taskOptLogListTable-toolbar‘,defaultToolbar:[title:‘条件过滤‘//标题,layEve 查看详情

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

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

移动端固定头部和固定左边第一列的实现方案(vue中实现demo)

最近移动端做一份报表,需要左右滚动时,固定左边部分;上下滚动时,固定头部部分。代码在Vue中简单实现主要思路是:a.左边部分滚动,实时修改右边部分的滚动条高度b.头部和内容部分都设置固定高度,当内容部分内容高度... 查看详情