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

Posted 2020-08-14 乐少007

是日有需求，曾探讨过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