home > webfront > SGML > html5 >

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

Author：zhoulujun Date：2021-07-31 Hits：

有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？

有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置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}

其实就是利用 position: sticky; 属性，固定表头。这里有一个特别注意的地方，就是需要设置 top: 0;

单独设置position: sticky; 无效。具体可以参看：《探究 position-sticky 失效问题 https://cloud.tencent.com/developer/article/1765768》

下面代码是使用粘性定位与 flex布局分别实现的头部固定代码

如果使用绝对定位实现，这个其实没有啥好说的。

相关热词搜索： position sticky 粘性定位表头固定 position-sticky sticky失效