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

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

yyshadow.

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

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/qq_37100378/article/details/100978623

版权

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

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

就直接贴代码了
里边用了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: