是日有需求,曾探讨过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. SQLMap简单尝试

    第一次完成了一个注入呢,虽然是恬不知耻的用sqlmap跑出来的 简单介绍注入时后台的数据等级,有助于后面的理解 ①可以类比成一个装着excel文件的文件夹,每一个excel文件就相当于一个数据库 ②库 ...

  2. c++ 求集合的交并补

    #include<iostream.h> #include<windows.h> #include<iomanip.h> #include<stdio.h&g ...

  3. WPF中展示HTML

    业务需求:将具有表格信息的HTML片段在WPF中展示出来,并像网页端一样,可以进行input的填写,checkbox选择,最后以HTML的形式完成保存. 天真的以为直接引入WPF中的WebBrowse ...

  4. chrome调试,打完断点后关于JS的几个控制介绍

    打完断点之后,关于JS的几个控制介绍. 快捷键:F8 "逐过程执行",继续执行代码,直到遇到下一个断点. 详细解释: 暂停和开始.当设置了断点之后,js的执行就暂停了,如果我们想要 ...

  5. POST/有道翻译 有bug

    1.发现在翻译时地址没有变,那是POST请求. 2.通过fidder抓包工具抓取url 3.对data分析,发现每次salt和sign都在变化. 4.查看源码,先用站长工具http://tool.ch ...

  6. 总结一下现在关于Design Support Library的几个博客

    原文转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0713/3179.html 关于Design Support Libr ...

  7. 「mysql优化专题」你们要的多表查询优化来啦!请查收(4)

    一.多表查询连接的选择: 相信这内连接,左连接什么的大家都比较熟悉了,当然还有左外连接什么的,基本用不上我就不贴出来了.这图只是让大家回忆一下,各种连接查询. 然后要告诉大家的是,需要根据查询的情况, ...

  8. .Net 异步方法, await async 使用

    最近朋友问起await  和 async第一次听说这个await ,就查了一下这个await使用在于 异步方法async 中,中文意思就是等待,经过一系列的百度参考简单的明白了这个东西的意思,  异步 ...

  9. windos10安装mongodb并配置

    想了想还是把这个写上吧,毕竟网上的教程有不少坑的. 首先下载mongodb,如果你嫌官网慢,那么你可以去我的百度云下载 链接:http://pan.baidu.com/s/1pKEWTBX 密码:v3 ...

  10. C语言中一些不被熟知的特性

    designated initializers(c99) C99允许你对结构体中指定的变量初始化,如 struct Foo { int x; int y; int z; }; }; 指定初始化也可适用 ...