![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动,第1张](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png "[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动,第1张")
最基础的思路就是表头和内容是用两个表格来显示（图来自 https://zhuanlan.zhihu.com/p/33280304 ），关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。
纵向滚动是挺好实现的，我开始是在内容的表格外面套了一个div，之后设置 overflow-y:auto 就实现纵向滚动了。
但横向滚动呢？
首先想到的方案是在最外面的div,outer加上 overflow-x:auto
虽然这样横纵都能滚动了，但是横向滚动的时候纵向滚动条也被滚走了。
然后想到了是用js来同步，可以是可以的，但是还是想挣扎一下。
之后想到了fixed，发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。
最后突然想到一个position的新属性，sticky
设置了 position: sticky ，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果（ https://www.cnblogs.com/s1nker/p/4835079.html ）。
所以最后设置了表头
css:
就成功实现了想要的效果了。
不过sticky的兼容性也是要考虑一下的。
给你提供个思路：第一行为一行多列的表格；
第一列为一列多行的表格；
剩下就是一个表格了。
然后把这些表格都放在一个div里面，并设置其样式
因为这一句：top: expression(this.offsetParent.scrollTop)
他的位置是动态变化的，所以会抖动
你拖动的时候慢一点应该就看不到了，或者你用javascript的onscroll事件控制
