• home > webfront > SGML > html5 >

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

    Author:zhoulujun Date:

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

    但是实现代码比起  :《纯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

    延伸阅读: