首页 > 代码库 > table左边固定-底部横向滚动条
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左边固定-底部横向滚动条