是日有需求,曾探讨过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左边固定-底部横向滚动条的更多相关文章

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

    图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. H5禁止底部横向滚动条,使一个元素居中

    1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...

  3. flex布局下el-table横向滚动条失效

    如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...

  4. table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条

    table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...

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

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  6. DataTables固定表格宽度(设置横向滚动条)

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  7. html table表格列数太多添加横向滚动条

    HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...

  8. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  9. jquery横向滚动条

    此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

随机推荐

  1. vue 二进制文件的下载(解决乱码和解压报错)

    问题描述:项目中使用的是vue框架进行开发,因为文件下载存在权限问题,所以并不能通过 a 链接的 href 属性直接赋值 URL进行下载, (如果你的文件没有下载权限,可以直接通过href属性赋值UR ...

  2. So, you think you know JavaScript?

    Baranovskiy 参考:http://dmitry.baranovskiy.com/post/91403200   题目一:   if (!("a" in window)) ...

  3. [Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,执行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决的方法

    这个现象仅仅出如今phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其他js框架我測试了几个(app framework, jquery mobile), ...

  4. 回溯法之求n个集合的幂集

    幂集:有一个集合A,集合A的幂集是由集合A的全部子集所组成的集合. 集合中的每一个元素仅仅有两种状态:属于幂集的元素集或不属于幂集的元素集. 集合{1,2,3},用一棵二叉树来表示. 递归函数 voi ...

  5. git for c#,子文件的加入

    private static void SubDirFile() { string wkDir = @"E:\DotNet2010\单位project\Git.Client\lib2Test ...

  6. hdu5304 Eastest Magical Day Seep Group&#39;s Summer 状压dp+生成树

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5304 16个点的无向图,问能生成多少个n条边的连通图.(即多一条边的树) 先n^3 * 2^n 枚举全部的 ...

  7. 个人作业2:APP案例分析

    产品 产品名 网易云音乐 选择原因 除社交软件和浏览器以外,在手机里存在最久的也是使用次数最多的APP就是它了.不管换多少次手机和电脑,它始终在我的装机必备名单上. 调研与评测 第一次上手体验 第一次 ...

  8. 大数据学习(6)MapReduce应用

    倒排索引 /** * * * <pre> *file1.txt: *hello ketty *hello tomcat * *file2.txt: *hello hadoop * *map ...

  9. 神经网络NN笔记

    参考:http://www.cnblogs.com/subconscious/p/5058741.html 俗话说,好记性不如烂笔头~~~~ 边学边记,方便以后查找~~~~~ 一.介绍一下经典的神经网 ...

  10. 在jQuery中使用canvas时遇到的问题

    正常的情况下一般在JavaScript中使用canvas,会用到如下代码: var canvas=document.getElementById("canvas"); var co ...