el-table 设置fixed属性之后 在safari上固定得列和滚动得列不对齐

最新推荐文章于 2025-11-04 16:35:14 发布
原创 最新推荐文章于 2025-11-04 16:35:14 发布 · 763 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

开发项目时用el-table渲染列表，在Chrome浏览器显示正常，但在Mac的Safari浏览器出现窜行问题。经测试不同内核浏览器，发现仅Safari有问题，判断为兼容问题。尝试多种方式失败后，为每一行设置高度，包括有fixed属性的行，成功解决问题。

在开发项目的时候 使用el-table 渲染列表，chorme 开发的 ，一切显示正常，但是在mac本上，用safari浏览器就会 窜行，一开始以为是浏览器的事情，结果我用了不同的内核的浏览器又试了试，火狐，360极速和兼容，然我没想到的是 360兼容模式居然都好使，就偏偏safari不好使，而且safari的内核还是和chrome一样的，不用想了，肯定是兼容问题，解决吧，

试了很多种方式，都是以失败告终，最后为每一行都设置了个高，是每一行，有fiexd属性的也要设置，成功解决了这个问题

 

 

callBack_____
关注
el-table实现自适应高度滚动，并处理fixed的错位问题
Moon Star
04-03 6892
实现elementUI的el-table自适应高度，并解决设置fixed列时带来的问题。
解决layui 数据表格固定列与表格不对齐，高度不一致
hu104160112的博客
02-04 7010
大家可能遇到过这种情况，表格的固定列高度和表格不一样 原因：表头或者标题数据换行，导致高度不一致 解决：在表格的done 回调中 done: function (index, layero) { //表头部分 //动态监听表头高度变化，冻结行跟着改变高度 $(".layui-table-header tr").resize(function () { $(".layui-table-header tr").each(function
解决Antd Table组件表头不对齐的问题
01-18
背景： 在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案： 1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）； 如果以上两步仍解决不了对齐问题的话，请继续第三步操作 3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式 （因为t
解决el-table，列使用fixed以后高度无法对齐问题
最新发布
m0_52872381的博客
11-04 76
important;important;
el-table表格fixed=“right“后表格错乱；Safari浏览器el-table表格错乱；Safari浏览器样式需改无效；
i_am_a_div的博客
04-01 2406
场景：el-table表格操作列右固定fixed=“right”，导致表格错乱。其实是由于某行的字体太多，所导致操作列高度错乱。 设置高度代码如下： /deep/ .el-table tr { height: 50px; //每行的高度 } /deep/ .el-table { .el-table__fixed, .el-table__fixed-right { .cell { height: 30px!important; //重点在.
element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题
m0_50207524的博客
04-08 4659
在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况。
el-table鼠标放上怎么让横向滚动条不显示
10-18
根据用户当前的需求，用户希望实现当鼠标悬停在Element Plus的el-table组件上时隐藏横向滚动条的效果。而之前提供的解决方案中，用户尝试使用`:deep(.el-table__body-wrapper) { overflow-x: hidden !important; }`...
css实现el-table不显示横向滚动条，鼠标放上也不显示横向滚动条
10-18
</think>### 解决方案：永久隐藏 el-table 横向滚动条（鼠标悬停时同样不显示） #### 核心 CSS 代码 ```css /* 永久隐藏横向滚动条（兼容所有浏览器） */ ::v-deep .el-table__body-wrapper { overflow-x: hidden ...
首次加载ant table表格固定列不对齐
08-30
我们正在处理Ant Design Vue的a-table组件在固定列和表头时出现的首次加载不对齐问题。根据引用内容，这个问题通常是由于滚动条的出现导致的高度计算不一致。 解决方案思路： 1. 根据引用[1]：可以通过减去滚动条...
u-table使用css 吸顶 固定前两列 左滑时 固定列也跟着走 怎么解决
10-10
根据您的需求，您希望为u-table（假设基于Element UI的el-table）实现表头吸顶（滚动时固定在顶部）和固定前两列（水平滚动时列保持可见）的功能。结合引用中的CSS方法[^1]和固定列逻辑，以下是纯CSS解决方案。核心...
低版本浏览器el-table表格错位
10-10
通过强制设置宽度和表格布局，确保列头和表格内容对齐 [^3]。 3. **固定列滑动错位**： 可使用 element 官方给出的 `doLayout` 方法。示例代码如下： ```vue <el-table :data="tableData" ref='table' style="width:...
el-table 在safari显示位置错乱
kgdtl的博客
08-30 1373
网络上看到有很多解决办法 1. 列的宽度统一使用width或者min-width， 不要交叉使用 2.修改css body .el-table th.gutter { display: table-cell !important; } body .el-table colgroup.gutter { display: table-cell !important; } table { width: 100% !important; } .el-table__body { width...
elementui的el-table因滚动条表格错位问题
weixin_51010848的博客
08-12 4800
min-width table-layout
Element ui中table标签上下滚动时表格错位
LoveZJC96的博客
07-08 735
在style中加
element 表格出现滚动条时，出现不对齐的问题的解决方案
菜鸟的博客
09-17 4545
1.兼容谷歌浏览器以及火狐浏览器 element表格中有一个doLayout方法，使用改方法时对 Table 进行重新布局。 mounted(){ setTimeout(()=> { this.$refs.table.doLayout() },1200) } 其中的this.$refs.table是在<el-table>中使用了ref="table <template> <el-table :da..
使用el-table中的fixed属性固定列，浏览器最小化出现固定列错位的问题
log22_rain的博客
08-20 1373
使用el-table中fixed属性固定操作列时，将浏览器最小化会出现当前固定的操作列与其他列对不齐，样式错乱的现象
elementui 表格兼容safafi 对不齐与错位问题，上下表格差几px 解决
Holly1945的博客
10-19 627
在Safari中 element ui 表格错位 /* 表格兼容safafi错位 */ .el-table__body, .el-table__header { width: 100%; table-layout: fixed !important; } .el-table th.gutter { display: table-cell !important; } .el-table colgroup.gutter { display: table-cell !important; }
解决前端ui界面使用element UI table表格不兼容safari浏览器，表格错乱的问题
热门推荐
qq_30405009的博客
06-05 1万+
代码只是两行，我却用了将近两天的时间才解决，新人一枚呀！哭哭！！ 想办法去控制住当前的table表格，而不是一味的使用element UI原来的ui去控制 控制表格的body .el-table__body { // 使表格兼容safari，不错位 width: 100%; table-layout: fixed !important; } table-layout知...
element 表格有固定列时滚动不齐有迟滞性
b563540292的博客
09-25 3601
解决方案是继承覆盖element的Table组件,并重写Table组件的bindEvents和syncPostion方法,因为根据源代码发现,Table中的syncPostion方法可能出于性能的原因使用了防抖,我们这里就直接把防抖拿掉了,但这不是产生问题的主要原因，这个只是会导致轻微的迟滞。 产生这个问题的最主要原因是：滚轮事件会自动触发滚动事件，滚动事件中自动使用了behavior: 'smooth’机制，这个机制会让滚动看起来很丝滑，但会耗费更多的性能，估计浏览器处于性能考虑导致两个滚动效果不同步了
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值