实现table表格列头固定，内容超出滚动

最新推荐文章于 2021-11-19 14:48:00 发布

yyshadow.

最新推荐文章于 2021-11-19 14:48:00 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： table css

本文链接：https://blog.youkuaiyun.com/qq_37100378/article/details/100978623

版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中使用CSS实现表格的列头固定，当表格内容过多时，内容区域实现滚动效果。关键在于利用CSS定位和overflow属性。

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

就直接贴代码了
里边用了vue的v-for循环数据可以忽略不计，主要是css样式*

            <table border="1" cellspacing="0" cellpadding="0" class="kcdata" height="500px">
                <thead>
                   <tr>
                       <th>序号</th>
                        <th>名称</th>
                        <th>库存</th>
                    </tr>
                </thead>
                <tbody :style="{height:(h-200)+'px'}">//给tbody固定高
                    <tr v-for="(i,index) in 100" :key="index" class="cptr">
                        <td style="text-align:center">{{index+1}}</td>
                        <td style="text-align:center">12345</td>
                        <td style="text-align:center">12</td>
                    </tr>
                </tbody>
            </table>


            <style>
                   //内容滚动
                   table tbody {
                        display: block;
                        overflow-y: scroll;
                    }
                    //固定表头
                    table thead,
                    tbody tr {
                        display: table;
                        width: 100%;
                        table-layout: fixed;
                    }
            </style>