elementui表格在safari浏览器样式错乱的问题

最新推荐文章于 2023-11-15 10:35:55 发布

布朗狗熊

最新推荐文章于 2023-11-15 10:35:55 发布

阅读量565

点赞数

文章标签： elementui safari javascript

本文链接：https://blog.youkuaiyun.com/weixin_40196539/article/details/129798590

版权

这段CSS代码用于确保.el-table__header,.el-table__body,.el-table__footer的宽度为100%并设置table-layout为fixed，重要性标记!important被添加以保证样式生效，特别提到width的!important是必须的。

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

1.如图所示
在这里插入图片描述
2.解决办法

.el-table__header,.el-table__body,.el-table__footer{
      width: 100% !important;
      table-layout: fixed !important;
}

注：width的！important 也是需要加上的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

布朗狗熊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue +ElementUI table中show-overflow-tooltip属性在IE11中的缺陷

liujiebahuang的博客

10-25

2170

这里写自定义目录标题bug出现背景bug阐述解决方案 bug出现背景 Vue 2.6 +ElementUI 2.12.0 +IE11浏览器 bug阐述当鼠标指针指向table组件带有show-overflow-tooltip属性的单元格时，会出现tips提示信息，此时不一定鼠标指针位置，滑动鼠标滚轮，tips信息并不消失，继续滚动会超出table范围继续显示。解决方案当监听到鼠标滚动事件时，...

elementui table在safari浏览器用了超过两行省略号样式错乱

qq_38299934的博客

02-21

667

elementui table在safari浏览器错乱

参与评论您还未登录，请先登录后发表或查看评论

element-ui el-table 在Safari下表头与内容错位的兼容问题

qq_38121975的博客

06-13

1676

el-table中表格和内容在Safari浏览器中错位问题

el-table 在苹果浏览器safari 中表头错乱

Kerwin__li的博客

05-11

784

全局样式中设置，即可兼容。

safari 下 el-table 表格错乱问题

Zyrzka的博客

09-19

731

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 { // 使表格兼容safari，不错位 width: 100%; t

element UI table表格不兼容safari浏览器，已解决

weixin_43105356的博客

05-08

3883

问题描述： el-table加了show-overflow-tooltip这个属性以后，如果有内容过长的行信息，用苹果safari浏览器，就会出现如下情况，表格整体会变得奇奇怪怪的。解决办法网上常见的一些方法，试过，但是没啥用，有的说是电脑分辨率导致的，具体原因说实话我不太清楚，有了解这个的bro，可以留言指导一下。我用了自己写样式的办法，来解决了这个兼容性问题。可以满足有超多内容适合，只显示三行，多余的省略号显示，鼠标方上去以后，可以悬浮出全部内容 1、效果如下： 2、具体解决办法： 2.1

【ElementUI表格布局深度解析】：切换tab页时固定列下方线条问题的彻底解决之道

[【ElementUI表格布局深度解析】：切换tab页时固定列下方线条问题的彻底解决之道](https://img-blog.csdnimg.cn/20190726151903998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR...

vue +elementui 表格列锁定

最新发布

04-01

此外，如果用户遇到特定问题，比如固定列在 Safari 中显示异常，可以建议检查CSS样式或查看GitHub上的issue。总之，回答需要覆盖基本用法、示例代码、常见问题及解决方案，以及最佳实践建议，帮助用户有效实现表格...

elementUI表格表头拖拽对不齐

01-18

这通常是因为在拖拽过程中改变了 DOM 结构或样式属性，而这些变化未被正确同步到表格其余部分。一种有效的解决方法是在完成拖拽操作后重新计算并应用每一列的宽度。具体来说，在每次结束拖拽事件时触发一次布局...

web元件库 ElementUI元件库.rar

09-13

5. **兼容性**：ElementUI支持现代浏览器，如Chrome、Firefox、Safari等，并对IE10及以上版本提供了有限的支持。 6. **文档齐全**：ElementUI提供了详尽的中文文档，不仅包括组件的使用方法，还有丰富的示例代码，...

el-form登录表单在Safari浏览遇到的问题

weixin_43078608的博客

08-29

442

最近遇到一个非常奇怪的问题，登录表单在输入密码之后，密码框失去焦点后获取数据，在这之前禁用登录按钮。还有一个重置按钮，用来重置表单。使用浏览器的记住密码功能填充表单，在Chrome，Firefox浏览器运行的好好的，但是到Safari浏览器就出现了问题，正常输入用户名密码可以登录，但使用浏览器记住密码功能填充表单，就出现了一个很奇怪的问题。表单被清空，也就是说在填充表单的同时执行了重置按钮。这...

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

fairyier

06-15

2036

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

有关Mac系统的Safari浏览器打开某些页面时结构混乱问题的解决方案

WinstonLau的博客

07-31

9456

解决方案一：按住键盘上的command + +/-，适当地放大或缩小页面，但这只对某个页面生效解决方案二：打开 Safari 浏览器的偏好设置，找到高级中的辅助功能，取消勾选“字体大小不得小于”这一项...

Element-UI在safari浏览器下table列表无法对齐的问题

sxLDWX的专栏

11-28

8511

由于Element-UI的table列表会在两个column中间添加一条能够拖动的竖线，（可能表现的不明显以至于很多人并没有发现，但是竖线是确实存在的。）在safari浏览器下这个竖线的样式无法正确渲染，所以导致了table列表的表头与内容存在几个px的偏差。我寻找了很久，也尝试与Element-UI官方团队进行沟通，希望官方能够修复这个bug。但是并没有生效，bug依旧存在。下面给出我的解决方案：

element-UI组件中safari兼容问题

马娟的博客

11-01

5892

1.safari浏览器input的placeholder不居中 input{ line-height:normal }

关于Element-ui中el-table在谷歌和360极速浏览器的兼容问题

weixin_45455635的博客

09-06

1445

关于Element-ui中el-table在谷歌和360极速浏览器的兼容问题

vue + element -ui 在ios上的问题

qq_35229216的博客

04-15

1284

1：在css中添加 html: { // overflow: auto; // -webkit-overflow-scrolling: touch; } 会导致在ios手机上的弹窗和遮盖层出现重叠，有可能是z-index 相差为1导致的问题解决办法可直接在#app中添加 minheight: 101%，但 html,body里要有 height： 100%； 2： io...

elementui表格兼容safari浏览器防止错位

qq_57952018的博客

11-15

273

【代码】elementui表格兼容safari浏览器防止错位。

使用element组件不显示图标解决方法

shmily_yz的博客

11-17

8900

因为element版本的问题导致部分图标不显示，在这里，我找到了两种解决方法第一种、也是相对简单的一种，我们只需要在文件中的最下方加入 /* qq：1098935671 */ <style> @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css"); </style> 即可实现显示图标，这种方法就是相当于引用了老版的element的一个css样式库。第二种、也是正式的一种，这种方法是我请教了