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

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

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

之前都是使用 绝对定位手工实现

.top{position:absolute,top:0,height:30px;}
.box{position:related;padding-top:30px;}

后面用flex布局实现。

.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