在Table表格中添加垂直滚动条

最新推荐文章于 2024-04-12 14:21:31 发布

Bravein丶

最新推荐文章于 2024-04-12 14:21:31 发布

阅读量1.1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/RisoKome/article/details/118766956

版权

这篇博客分享了一种CSS样式技巧，用于在表格内容过多时显示垂直滚动条，保持thead固定，同时确保thead宽度适应。通过设置tbody的高度和overflow属性，以及使用calc()函数调整thead宽度，实现了优雅的表格滚动效果。

摘要由CSDN通过智能技术生成

<style>
/*设置 tbody高度大于400px时 出现滚动条*/
    table tbody {
        display: block;
        height: 400px;
        overflow-y: scroll;
    }
    table thead, tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
/*滚动条默认宽度是16px 将thead的宽度减16px*/
    table thead {
        width: calc( 100% - 1em);
    }    
</style>