摘要：将设置为将和的放入一个的中，设置横向轴可以滚动，轴不可滚动。表头和表内容的横向方向滚动能力其实是父级样式赋予的。
1.为了固定表头我们需要先把表格的head和tbody切分到两个table里： 和
里。
2.将table-body放在一个table-body-box的div里设置y轴方向可以滚动，x轴方向不可滚动，这样表内容就能在自己的区域实现垂直方向的滚动了。
3.将table-head设置为absolute
4.将table-head和table-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/56936.html
摘要：将设置为将和的放入一个的中，设置横向轴可以滚动，轴不可滚动。表头和表内容的横向方向滚动能力其实是父级样式赋予的。 1.为了固定表头我们需要先把表格的head和tbody切分到两个table里： 和 里。 2.将table-body放在一个table-body-box的div里设置y轴方向可以滚动，x轴方向不可滚动，这样表内容就能在自己的区域实现垂直方向的滚动了。3.将table-hea...
摘要：将设置为将和的放入一个的中，设置横向轴可以滚动，轴不可滚动。表头和表内容的横向方向滚动能力其实是父级样式赋予的。 1.为了固定表头我们需要先把表格的head和tbody切分到两个table里： 和 里。 2.将table-body放在一个table-body-box的div里设置y轴方向可以滚动，x轴方向不可滚动，这样表内容就能在自己的区域实现垂直方向的滚动了。3.将table-hea...
摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。 今天，你的浏览器 滚动 了吗？ 序 在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...
摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。 今天，你的浏览器 滚动 了吗？ 序 在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...
摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。 作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...
阅读 2972·2023-04-26 02:40
阅读 4364·2021-09-22 15:22
阅读 1185·2021-09-22 10:02
阅读 3301·2021-08-11 10:23
阅读 1134·2019-12-27 11:47
阅读 1207·2019-08-30 15:55
阅读 2246·2019-08-30 12:48
阅读 427·2019-08-30 11:04
