表头固定表身动的简单CSS实现方法

最新推荐文章于 2024-07-13 15:29:58 发布

健健健健健健

最新推荐文章于 2024-07-13 15:29:58 发布

阅读量210

点赞数

分类专栏：前端经验记录文章标签：表格

本文链接：https://blog.csdn.net/weixin_45187181/article/details/93198952

版权

前端经验记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表身要固定高度，配合min-height和max-height使用

overflow-y，建议改成auto，滚动条所占的宽度会造成表头和表身一堆宽度的错位

calc可以进行计算滚动条造成的宽度损失

<style>

table tbody {

    display:block;

    height:195px;

    overflow-y:scroll;

}

table thead, tbody tr {

    display:table;

    width:100%;

    table-layout:fixed;

}

table thead {

    width: calc( 100% - 5px)

}

table thead th{ background:#ccc;}

</style>