zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Redis源码阅读笔记(2)——字典(Map)实现原理
    Partition List ——LeetCode
    docker format (golang template)
    markdown 换行
    pecan快速教程
    nvdimm
    k8s device plugin
    linux 文件同步
    复制MIFARE Classic卡
    install docker swarm on centos
  • 原文地址:https://www.cnblogs.com/leshao/p/5961923.html
Copyright © 2011-2022 走看看