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