资讯专栏INFORMATION COLUMN

一种局部固定表头的实现方案(横向可跟随内容一同滚动,纵向锁定表头)

zhkai / 589人阅读

摘要:将设置为将和的放入一个的中,设置横向轴可以滚动,轴不可滚动。表头和表内容的横向方向滚动能力其实是父级样式赋予的。

1.为了固定表头我们需要先把表格的head和tbody切分到两个table里:

里。

2.将table-body放在一个table-body-box的div里设置y轴方向可以滚动,x轴方向不可滚动,这样表内容就能在自己的区域实现垂直方向的滚动了。
3.将table-head设置为absolute

4.将table-headtable-body-box的div放入一个table-box的div中,设置横向x轴可以滚动,y轴不可滚动。
这样两个表就会在x方向滚动,y轴不滚动,表头就垂直方向固定在垂直方向,横向滚动在table-box出现滚动条的时候,内部的表格头和表格内容因为没有设置为fixed,所以会被滚动。

表头和表内容的横向方向滚动能力(其实是父级overflow-x:scroll样式赋予的)。表内容的垂直方向滚动是通过表内容外套的table-body-box设置overflow-y:scroll来实现的。

5.代码如下:




html如下
        
Company Provision Following in Point Customer Grade Allocated Time Follow up Person Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department
Shanghai Yinghuang FOB Dumped Cabinet Important 2017-10-28 Nathan Sales Department

6.可以结合flex做到自适应表头和表格内容

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54458.html

相关文章

  • 一种局部固定表头实现方案横向跟随内容一同滚动纵向锁定表头

    摘要:将设置为将和的放入一个的中,设置横向轴可以滚动,轴不可滚动。表头和表内容的横向方向滚动能力其实是父级样式赋予的。 1.为了固定表头我们需要先把表格的head和tbody切分到两个table里: 和 里。 2.将table-body放在一个table-body-box的div里设置y轴方向可以滚动,x轴方向不可滚动,这样表内容就能在自己的区域实现垂直方向的滚动了。3.将table-hea...

    Alfred 评论0 收藏0
  • 今天,你浏览器 “滚动” 了吗?

    摘要:今天,你的浏览器滚动了吗序在页面中,一个有高度或者宽度的容器是最常见的构成元素,而在其中的子元素有很大的概率超过父容器的尺寸限制,我们称之为溢出。 今天,你的浏览器 滚动 了吗? 序 在 Web 页面中,一个有高度或者宽度的容器是最常见的构成元素,而在其中的子元素有很大的概率超过父容器的尺寸限制,我们称之为溢出。而应对溢出,隐藏或者滚动是最常见的处理方式。滚动,作为 FEers 最经常...

    leo108 评论0 收藏0
  • 今天,你浏览器 “滚动” 了吗?

    摘要:今天,你的浏览器滚动了吗序在页面中,一个有高度或者宽度的容器是最常见的构成元素,而在其中的子元素有很大的概率超过父容器的尺寸限制,我们称之为溢出。 今天,你的浏览器 滚动 了吗? 序 在 Web 页面中,一个有高度或者宽度的容器是最常见的构成元素,而在其中的子元素有很大的概率超过父容器的尺寸限制,我们称之为溢出。而应对溢出,隐藏或者滚动是最常见的处理方式。滚动,作为 FEers 最经常...

    ad6623 评论0 收藏0
  • jsu系列之表格组件 ---- jsu.Table

    摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...

    soasme 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<