el-table显示滚动条，但表头固定（解决方法）

原创 已于 2022-03-07 14:55:35 修改 · 7.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

于 2022-03-07 14:55:12 首次发布
本文介绍了如何在前端开发中，为Element UI的el-table组件添加height属性，以及当表格外层存在div容器时，如何同时设置div的高度，以实现响应式和滚动条效果。通过实例代码解析，帮助开发者理解如何更好地控制表格的显示和布局。

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

  1. el-table添加height属性
  2. 若table外层是div，则div也添加height
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

vue3-seamless-scroll实现el-table的无线滚动出了问题，如何解决？
**My Coding Family**
07-11 535
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！
el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位
qq_45915537的博客
07-05 3581
table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...
固定Table第一行或某几行不随滚动条滚动而滚动
01-19
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop-2); } 使用： 复制代码代码如下: <div> <table class=”con_tbl”>         <tr class=”fixedHead”>         <th>标题不动</th> </tr> <PRE class=html name=”code”>        <t
element-ui el-table 固定表头
XueZePeng18729875380的博客
01-26 3085
1. 官网给出两种种属性来固定表头 height 以及 max-height；但是有个问题就是 height高度会被定死，max-height无法适应不同分辨率的情况。2. 可以进行样式控制表格高度，达到固定表头的需求，就可以避免高度定死的情况。
【elementUI踩坑记录】解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题
最新发布
DecorateCC的博客
07-13 583
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
el-table 表头固定
柑橘乌云_
04-28 6891
el-table、 如果你想高度自适应并且表头固定，那么可以通过css来实现，就可以避免高度定死的情况。给出的属性是height ，表头就可以固定，但是带来的问题就是，表格高度就定死了。
element-plus el-table表体滚动而表头未滚动
qq_26889291的博客
03-30 1617
造成的原因是因为在el-table直接加了一个类(pading:20px)解决方法用div包裹el-table，且把这个类加在div上。
第十二篇：element ui table表格表头固定，下边表格滑动
maliyao4233的博客
07-14 2577
注意：我说的这个方法适用于如果下边多一行是计算结果。如果正常的表格滚动就不用这么麻烦。问题：表格固定，但是滑动的时候表头也动的解决办法。给顶部标题导航加个定位就好了。
【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号_el-table-column超出隐藏
2401_84411767的博客
05-01 1413
/ 判断是否开启tooltip功能。// 判断是否开启tooltip功能。// 判断表头单列字符长度。// 获取父元素的宽度。// 获取自身的宽度。
el-table打印PDF预览，表头错位的解决方案
yan1915766026的博客
12-17 2538
el-table打印预览PDF，表头错位边框线不显示等问题的解决方案
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： ...
el-table自定义样式，表头固定，数据过多时滚动
song_song0927的博客
08-21 1885
el-table自定义样式，表头固定，数据过多时滚动
element的table表格表头不动，内容横向竖向滚动，前两列设置了fixed，会出现的bug，用下面的方法可以解决
m0_73738273的博客
05-11 677
【代码】element的table表格表头不动，内容横向竖向滚动，前两列设置了fixed，会出现的bug，用下面的方法可以解决。
使用html中的table实现内容滚动下拉表头固定不动的方法
徊忆羽菲
08-06 5358
使用html中的table实现内容滚动下拉表头固定不动的方法 序号内容 1 我只是用来测试的 2 我只是用来测试的 3 我只是用来测试的 4 我只是用来测试的 5 我只是用来测试的 6 我只是用来测试的 7 我只是用来测试的 8 我只是用来测试的 9 我只是用来测试的 10 我只是用来测试的 11 我只是用来测试的 12 我只是用来测试的 13 我只是用来测试的 14 我只是用来测试的 15 我只是用来测试的 ...
table 滚动时固定表头
hfhwfw161226的博客
10-12 689
表格内容过多时，仅滚动数据，表头不动。
html table表头不变滚动表体
热门推荐
回梦游仙
04-09 2万+
table 需要出现纵向滚动条时，大多数情况会在table外面包一层div 设置css属性  overflow:auto 来实现table出现滚动条但这样做有个问题，滑动表格是移动整体 表头也会被移动。 解决办法有如下 1、 设置两个table 表头一个表体一个
element table头部固定，内容滚动
weixin_49511142的博客
04-01 2106
思路：首先我们要给table表格套一层父元素，然后获取这个父元素的高度，同时获取表格的表头的高度以及分页的高度。然后用父元素的高度减去表头和分页的高度即是table表格的高度，然后再把这个高度赋值给。2.然后我又想会不会是数据过多，我先获取了dom，然后数据渲染后的dom我们高度不一致，里面进行监听，等数据回来后再获取dom，这样总可以了吧，但是事实总是残酷的，又失败了。3. 最后大家别忘了销毁监听器。
el-table固定表头，动态计算高度
tt1234561009的博客
04-01 771
在elementui中固定el-table表头是通过给表格设置高度来实现的。而在实际开发中开发可能无法确定表格的实际高度，因此需要动态计算表格高度。2、动态计算表格高度，并监听浏览器窗口变化，动态计算表格高度。为了更好的让表格自适应可使用max-height。这世界很喧嚣，做你自己就好。1、给表格绑定动态高度。
实现在一个TABLE表中，保持表头不动，固定表头
java的涟漪
09-22 275
&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt; //此式样将第一行一直保留在页面上，不随滚动条的移动而移动.Freezing_tdd { top:expression(document.getElementById('div-1').scrollTop-1); position:relative ; } &l...
el-table固定表头 滚动条不显示
02-20
### 解决 Element UI `el-table` 固定表头时滚动条不显示的问题 当遇到 `el-table` 的横向内容超出宽度却未显示滚动条的情况，可能是因为自定义的页面滚动条样式影响到了表格的行为[^1]。 #### 方法一：检查并调整...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值