CSS实现表头固定内容滚动效果

最新推荐文章于 2024-11-04 09:14:24 发布

我的腹肌呢？

最新推荐文章于 2024-11-04 09:14:24 发布

阅读量677

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41654003/article/details/96156328

本文介绍了一种使用 CSS 来实现表格滚动条效果的方法。通过设置 tbody 的 display 属性为 block，并定义高度及 overflow-y 为 scroll 实现垂直滚动。thead 和 tbody 的 tr 设置 display 为 table，以确保表格结构正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tbody {
        display:block;
        height:450px; <!--可以通过js来计算tbody需要的高度-->
        overflow-y:scroll;
    }

thead, tbody tr {
        display:table;
        table-layout:fixed;
        width: 100%;
    }

thead {
        width: calc( 100% - 1.3em ); <!--此处可以跳转 1.3em的值，使thead列和tbody列对齐-->
    }