el-table在safari浏览器表头与表格内容错位显示问题

最新推荐文章于 2026-06-20 16:05:40 发布
原创 最新推荐文章于 2026-06-20 16:05:40 发布 · 2.1k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#safari #vue.js #前端 #el-table错位
博客内容主要关于在Safari浏览器中遇到的表格列宽对齐问题。当el-table-column设置了宽度且表格总列宽超过页面宽度，导致出现横向滚动条时，该问题会显现。为解决这个问题，提出了一个全局CSS样式修复方案：为.el-table__header, .el-table__body, .el-table__footer添加width: 100%!important;和table-layout: fixed!important;的样式，经过验证，该方法能够有效解决Safari浏览器中表格列头与td对不齐的问题。

safari浏览器兼容问题，如图：
在这里插入图片描述

表现：代码层面，有给el-table-column设置宽度，并且整个表格的列宽超过页面宽度，出现横向滚动条时，safari浏览器可能会出现此问题。

解决：

全局加如下样式

// 兼容safari列头与td对不齐问题
.el-table__header, .el-table__body, .el-table__footer{
  width:100% !important;
  table-layout: fixed !important;
}

亲测有效

element-ui el-table 在Safari下表头与内容错位的兼容问题
qq_38121975的博客
06-13 1809
el-table中表格和内容在Safari浏览器中错位问题
element UI table表格不兼容safari浏览器，已解决
weixin_43105356的博客
05-08 3982
问题描述： el-table加了show-overflow-tooltip这个属性以后，如果有内容过长的行信息，用苹果safari浏览器，就会出现如下情况，表格整体会变得奇奇怪怪的。 解决办法 网上常见的一些方法，试过，但是没啥用，有的说是电脑分辨率导致的，具体原因说实话我不太清楚，有了解这个的bro，可以留言指导一下。 我用了自己写样式的办法，来解决了这个兼容性问题。 可以满足有超多内容适合，只显示三行，多余的省略号显示，鼠标方上去以后，可以悬浮出全部内容 1、效果如下： 2、具体解决办法： 2.1
el-table 在safari显示位置错乱
kgdtl的博客
08-30 1403
网络上看到有很多解决办法 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...
element-ui 嵌套表格表头宽度显示的浏览器兼容问题
Julie_Go的专栏
08-10 769
在windows电脑IE、chrome浏览器上宽度显示，受到下面属性影响，覆盖css属性table-layout即可 .el-table__header{ table-layout: fixed; } 参考：https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
使用 element ui table el-table 在 Safari浏览器 对不齐
qubes的专栏
01-04 874
el-table 在 Safari浏览器 对不齐。
safari浏览器中element UI table表格错位的兼容，合计行错位的处理
Lucky_bo的专栏
12-17 3240
在使用固定table表头和合计行时出现了，表格错位的现象，具体解决方案： 设置一个公共的样式: .el-table__header,.el-table__body,.el-table__footer{ width: 100%; table-layout: fixed !important; } 因为表格是全局性的，这边最好设置一个全局的样式，合计的错位也相应的解决了。 table-layout知识点补充： 定义和用法 tableLayout 属性用来显示表格单元格、行、列的算法规则
element plus框架el-table表格不兼容safari浏览器问题
HeMister的博客
07-30 579
tableLayout 属性用来显示表格单元格、行、列的算法规则。
element ui 表格改变字体颜色以及边框颜色，表头与表格内容错位设置，safira浏览器中单元格文字超出宽度显示省略号失效导致表格错位设置
weiwandaixu_zx的博客
11-13 468
Vue中 <style lang="scss" scoped> .shopStatistics{ // 表格外面父级元素类名 /deep/ .el-table { thead { .cell { text-align: center; // 表头字体居中 } } tr,td{ text-align: center; // 表格内容居中 color: black;
element-ui table 在Safari下表格与表头错位的兼容问题
HZKang的博客
05-22 4400
项目是vue-admin-element做的，在Safari下表格出现样式宽度错乱，这个问题这里用css样式解决： body .el-table th.gutter { display: table-cell !important; } body .el-table colgroup.gutter { display: table-cell !important; } table { ...
element表格在Safari浏览器下面对不齐？
qq_38210427的博客
07-30 514
element UI框架el-table表格不兼容safari浏览器，因此表头thead和表体tbody存在错位问题。tableLayout 属性用来显示表格单元格、行、列的算法规则。
el-table 不兼容 safari浏览器（version ＜ 17.5）
weixin_45963880的博客
03-26 254
elemnet-ui、element-plus 的 el-table 在 safari浏览器（version < 17.5） 下均存在 表头和表体错位 的问题。
elementui 表格兼容safafi 对不齐与错位问题，上下表格差几px 解决
Holly1945的博客
10-19 677
在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; }
element UI 使用问题
weixin_45563970的博客
01-11 169
1
Vue项目避坑指南：从Excel粘贴数据到el-table，你可能遇到的5个坑及解决方案
weixin_33716154的博客
04-19 388
本文深入解析Vue项目中Excel数据粘贴到el-table时常见的5个技术难题，包括数据解析陷阱、表头动态匹配、性能优化、浏览器兼容性和交互体验细节。提供工程化解决方案，帮助开发者高效处理复制黏贴功能，提升后台管理系统的数据处理能力。
【Elemen-ui - el-table在safrai浏览器下表头和表体错位】
weixin_47416539的博客
07-27 234
【代码】【Elemen-ui - el-table在safrai浏览器下表头和表体错位】
HTML表格CSS样式化：border-collapse与渲染规则深度解析
weixin_34087307的博客
06-20 366
HTML表格不是普通块级元素，而是一套内置布局引擎，其CSS渲染遵循独特规则。理解border-collapse的分离与合并模式，是解决边框重叠、样式失效等核心问题的前提；它直接决定padding作用域、vertical-align基准线及响应式重构逻辑。现代表格样式化需兼顾语义正确性、视觉一致性与无障碍支持，在金融、医疗、后台等高要求场景中尤为关键。本文聚焦浏览器原生表格渲染机制，详解border优先级链、单元格内容对齐原理及移动端信息密度重构方案。
Vue Grid组件深度设计：状态管理与性能优化实战
最新发布
weixin_34198881的博客
06-20 367
Grid 组件远不止是数据渲染的表格容器，而是融合响应式状态管理、DOM 行为控制与性能边界的前端核心业务单元。其本质是围绕 Pagination、Fixed Header、rowsPerPage 等关键能力构建可预测、可维护、可扩展的数据视图治理系统。通过分层架构（数据适配→状态管理→渲染计算→视图呈现），实现跨数据源兼容、暗色模式热插拔、离线编辑无缝集成等工程价值。适用于中后台系统中高交互、多维度、长生命周期的列表场景，尤其解决排序丢失、滚动卡顿、列宽错位、打印异常等 Vue 项目高频痛点。
解决前端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知...
el-table 在苹果浏览器safari 中表头错乱
Kerwin__li的博客
05-11 825
全局样式中设置，即可兼容。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值