vue + elementui的table在ie和火狐中边框不显示的问题

最新推荐文章于 2025-06-17 14:13:55 发布

原创最新推荐文章于 2025-06-17 14:13:55 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个table组件中同时设置了border和stripe属性导致斑马线行的边框在Firefox浏览器下无法正常显示的问题，并提供了解决方案：通过给td元素设置background-clip:padding-box; 的CSS样式来解决兼容性问题。

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

问题：table组件同时设置border和stripe属性，有斑马线的行border显示不出来

解决方案：

td {
  background-clip: padding-box;
}

给td设置背景裁剪规则来解决FireFox的兼容性问题，完美解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李少0

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

火狐浏览器中table下边框不显示问题

u012826174的博客

10-08

6385

有问题的代码 <html> <head> <meta charset="UTF-8"> <title>canvas</title> <style type="text/css"> .apply-table { width: 100%; text-align: center;

element table组件的show-overflow-tooltip属性的实现原理

热门推荐

仰望星空的代码

01-11

1万+

element ui框架中的 table 组件的 show-overflow-tooltip 属性是如何实现的？其中体现了哪些 DOM 原生 API 的用法？让我们一探究竟。

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

vue项目中vxe-table火狐浏览器打印样式表格框线丢失

小混子得得的博客

10-29

2666

声明在data里面的样式 tablePrint: { // 自定义打印的样式示例 style: ` .vxe-table { color: #000000; // 修改表格默认颜色 font-size: 12px; // 修改表格默认字体大小 font-family: "Microsoft YaHei",微软雅黑, "MicrosoftJhengHe...

揭秘！为何 ElementUI 表格边框比原生 table 更细？

yonghuid123453的博客

06-17

365

使用border-collapse: collapse后，浏览器会将相邻单元格的边框合并，仅绘制一条边框，避免了线条叠加，从而使边框看起来更细。由于每个单元格边框独立，浏览器在渲染时，会分别绘制每个单元格的四条边框，在相邻单元格边框交接处，线条叠加导致变粗。通过设置border-collapse: collapse，将相邻边框合并为一条边框，消除单元格之间的间距。每个单元格都有独立边框，边框线条较粗，相邻单元格边框重叠处会形成更粗的线条，视觉上边框明显更宽。ElementUI 表格样式。

火狐浏览器 画table 边框不生效解决方案

weixin_46443526的博客

06-25

736

.apply-table { border-spacing: 0; border-collapse: unset; border-top: #000 1px solid; border-right: #000 1px solid; } .apply-table th, .apply-table td { border-left: #000 1px solid; border-bottom: #000 1px solid; }

IE浏览器表格内外边框不显示问题

weixin_33938733的博客

04-20

1509

IE8以下的表格会出现边框丢失的情况,所以想要使用有内边框和外边框的表格,最好调用这个样式:table{ border-collapse:collapse; } table,th,td{ border:1px solid black;}但是这种写法或影响到你外部的其他表格的样式,比如说你有些表格希望没有边框,在你转到包含以上样式的页面之前,这些表格式无边框的,但是当你转到包含以上...

element-ui中el-table使用fixed=“right“时固定列左边框消失问题

xiaobaige6084的博客

07-11

1932

element-ui中el-table使用fixed="right"时，横向滚动条滚到最右，固定列左边框不显示，加上如下css样式即可解决。

解决element-ui的表格列的边框线消失的bug

Future1994的博客

08-18

4475

转自：https://www.cnblogs.com/shuen/p/10196545.html 如上图所示，边框线消失了，解决方法如下添加css代码，如果是修改全局，则到全局样式文件添加 .el-table__row{ td:not(.is-hidden):last-child{ right:-1px;} } 如果是修改局部，则用样式穿透添加，在当前页面的css文件添加 /*注意deep两侧都要有空格*/ .current_page_classname /deep/ ..

面试宝典 v2-新增Vue和React.pdf

10-24

1. 测试页面的浏览器及内核：开发者需在多个主流浏览器（如Chrome、Firefox、Safari、IE等）中测试网页，并了解这些浏览器所采用的内核（如Blink、Gecko、WebKit等）。 2. Doctype的作用：Doctype声明位于HTML文档的...

在火狐浏览器里面el-table横向滚动条给 fixed 固定栏挡住的问题咋么解决，chrome浏览器则没问题

最新发布

07-31

已知：在Chrome等浏览器中，el-table的横向滚动条会正常显示在fixed列的下方，但在Firefox中可能会出现滚动条被fixed列遮挡的情况。原因分析：在Firefox中，表格的固定列（fixed columns）使用position: ...

【前端UI细节处理】：ElementUI el_table tab切换固定列线条问题的完美修复案例

本文深入探讨了ElementUI中el_table组件的固定列显示问题，分析了用户体验受影响的场景和案例。通过理解CSS层叠上下文和ElementUI默认样式，本文揭示了线条错乱的技术原因，并提出了针对性的排查方法。接着，文章...

【前端调试实战】：ElementUI切换tab页后el_table固定列线条问题的快速修复指南

[【前端调试实战】：ElementUI切换tab页后el_table固定列线条问题的快速修复指南](https://img-blog.csdnimg.cn/d5eef19b6723403cb2aedae81a7c431f.png) # 摘要本文专注于ElementUI固定列的原理、问题分析以及前端...

element el-input 去掉边框

qq3163566的博客

10-13

1475

element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的我们需要这样子的然后我们常规操作，border: none; 或者 border: 0; 发现行不通，哈哈哈哈哈 tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。然后就就，就发现个好东西，>>> ， &g..

【element-ui】表格设置固定栏后，边框线消失的问题

CharlynYanyan的博客

01-26

2095

解决element-ui的表格设置固定栏后，边框线消失的问题 <style scoped lang = 'scss'> /deep/ .el-table__fixed-header-wrapper { .el-table__header { th:not(.is-hidden):last-child { right: -1px; } } } /deep/ .el-table__row{ td:not(.is-hidden):last-child{

table中边框在firefox中不显示的问题

qq564280420的博客

07-03

2184

表格在firefox中边框不显示的两种情况

火狐浏览器打印时会出现边框线不显示(缩放页面也会出现)

lance_heart的博客

02-28

3394

有人说，这个问题不是浏览器的缘故，而是缩放本身的机制导致的；但是我发现谷歌缩放是没问题的，火狐就有问题所谓缩放就是针对展示内容的像素进行缩减，当刚好到某一个点时，就会出现边框线消失的问题了目前的方法就是: 需要对表格及单元格的边框线重新设置 th, td { border-left: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } tr th:last-child, tr td:last-child { border-righ.

Element-UI火狐表格错位问题解决方案

nchencc的博客

11-01

1541

Element-UI火狐表格错位问题解决方案在app.vue中加入以下样式（我的表格加入了border属性） .el-table–border th.gutter:last-of-type { display: block!important; width: 17px!important; } 火狐浏览器下这样就成功啦 ...

elementUI样式穿透在谷歌浏览器生效，在火狐浏览器无效问题解决方案

一个在全能之路上越走越远的男人。

11-13

1878

怎么说呢，可能一开始不知道到底element的样式穿透到底该怎么写。所以就在所有需要的地方都加/deep/前缀，其实没必要这个样子，只要在组件最外层加个class,然后/deep/这个外层的class，包裹住的其他样式那就行了。所以无用的/deep/ 删掉，火狐浏览器就生效啦。 ...

el-table设置表格显示外边框和表头的下边框

xiaolu1na的博客

07-03

9174

elementUI的el-table