table左边固定-底部横向滚动条
是日有需求,曾探讨过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左边固定-底部横向滚动条的更多相关文章
- table左边固定-底部横向滚动条-demo
图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- H5禁止底部横向滚动条,使一个元素居中
1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...
- flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
- table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条
table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
- DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
- html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- jquery横向滚动条
此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
随机推荐
- 载入DLL中的图片资源生成Skia中的SkBitmap对象
PPAPI Plugin在Windows下是DLL,能够嵌入图片文件.使用Skia画图时须要依据DLL里的图片文件生成SkBitmap对象. 以下是代码: #include "utils.h ...
- nyoj 123 士兵杀敌(四)【树状数组】+【插线问点】
树状数组有两种情况:插点问线和插线问点.这道题是插线问点. 由于树状数组最简单的作用是计算1~x的和,所以给出(a, b. c).表示(a,b)区间添加c, 那我们仅仅须要在a点原来的基础上添加c,然 ...
- Esri:为Web GIS注入新内涵
纵观近些年IT与空间技术的发展,云计算.大数据.实时信息.LBS.无人机.倾斜摄影等新技术层出不穷:互联网基础设施建设成绩瞩目,宽带成为国家战略性公共基础设施. GIS(地理信息系统)作为空间信息分析 ...
- xcode 6 改动组织及开发人员
搞个ios 开发死去活来的,各个地方说的都不一样,defaults write 不好用 在xcode6中 改动方法例如以下 改动create by __FULLUSERNAME___ 部分 Syste ...
- 一行代码巧妙实现iOS返回button
一行代码巧妙实现iOS返回button: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[ ...
- break and continue
public class HelloWorld { public static void main(String[] args) { int sum = 0; for (int i = 1; i &l ...
- Natas Wargame Level27 Writeup(SQL表的注入/溢出与截取)
前端: <html> <head> <!-- This stuff in the header has nothing to do with the level --&g ...
- Python datatime 格式转换,插入MySQL数据库
Python datatime 格式转换,插入MySQL数据库 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-11-2 ...
- redis启动脚本报错
1.执行redis脚本启动报错 [root@localhost ~]# service redis start /var/run/redis_6379.pid exists, process is a ...
- Ubuntu系统怎么切换多用户命令界面
ctrl+alt+F2~F6 切换窗口 返回桌面 Ctrl+Alt+F7