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


    是日有需求,曾探讨过table表单头部、尾部固定不动,中间内容随着滚动条的滚动而变化。

    整合资料之际,发现有很多表格,表单展现中,横向数据很多、很长,不方便查看。

    则,横空霹雳出了,此款:table表单左边固定,底部滚动条左右滑动展现数据demo。

    原理很简单:在 table外面嵌套一层div ,并且设置此父div {overflow: auto;}.此举为了出席横向滚动条

    对里面的tr设置{position: relative;}相对定位 对tr里面的第一个td设置fixed

    .fixed { position: fixed; background: #069DD5!important; color: #fff; 37px; height: 30px; line-height: 30px; }

    同时为了撑开 左边固定的位置,在第二个td位置,设置一个空的td

      .td-empty { 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

  • 相关阅读:
    如何激活myecilpse 10
    Myecilpse 10里安装配置maven
    spring mvc 模糊查询防注入
    javascript 取整,取余数
    spring3-mvc实例-信息转换
    CSS中怎么让DIV居中
    git
    浏览器窗口的大小
    如何限制文本框中的字数
    jquery如何设置控件位置
  • 原文地址:https://www.cnblogs.com/leshao/p/5961923.html
Copyright © 2020-2023  润新知