有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。
但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？
之前都是使用 绝对定位手工实现
代码语言：javascript复制.top{position:absolute,top:0,height:30px;}
.box{position:related;padding-top:30px;}后面用flex布局实现。
代码语言：javascript复制.box{display:flex;flex-direction:column;}
.top{height:30px;}
.content{flex:1}但是实现代码比起 ：《纯CSS实现标题栏、表格头水平滚动垂直不滚动 》
其实就是利用 position: sticky; 属性，固定表头。这里有一个特别注意的地方，就是需要设置 top: 0;
单独设置position: sticky; 无效。具体可以参看：《探究 position-sticky 失效问题 https://cloud.tencent.com/developer/article/1765768》
下面代码是 使用粘性定位与 flex布局分别实现的头部固定代码
https://codepen.io/lujun-zhou/pen/MWmGMyP
如果使用 绝对定位实现，这个其实没有啥好说的。
转载本站文章《如何纯CSS实现标题栏、表格头水平滚动垂直不滚动》, 请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0731_8650.html
