![[前端][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.scroll{
scrollbar-arrow-color: #326BAB/*三角箭头的颜色*/
scrollbar-face-color: #CAEAFC/*立体滚动条的颜色*/
scrollbar-3dlight-color: #98D1F5/*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #CAEAFC/*滚动条空白部分的颜色*/
scrollbar-shadow-color: #98D1F5/*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #CAEAFC/*立体滚动条强阴影的颜色*/
scrollbar-track-color: #C9E1F9/*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8/*滚动条的基本颜色*/
}
够详细了吧
如果你要很个性化的样式，就用jQuery的滚动条插件吧
隐藏竖向滚动条在子页面的<html>标签里加入以下格式:<htmlstyle="overflow:autooverflow-y:hidden">,
style="overflow:auto"，当内容超出范围之后，就会自动有滚动条了。
设置div横向滚动条div<style="overflow:scroll"></div>
