css表格标题不滚动,纯CSS实现标题栏、表格头水平滚动垂直不滚动

一、需求描述

有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。

但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？

此时，使用传统的position:fixed定位是不行的，因为此时水平滚动也会纹丝不动。

此时可以试试position:sticky粘性定位试试。

二、粘性定位实现

先看下实现的效果：

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9976(作者张鑫旭)

如果demo不方便点击，也可以试试点击下面的视频看看效果。

实现的原理其实挺简单的：

使用同一个滚动容器；

导航元素设置如下CSS属性：

.header {

position: st