element表头与表体亦或者内容错位

最新推荐文章于 2024-02-22 16:41:37 发布

原创最新推荐文章于 2024-02-22 16:41:37 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决Element UI框架下表格错位问题的方法，通过调整CSS样式和更新依赖来确保表格显示正确。

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

可以看到这个表格之间有个几px的错位
在这里插入图片描述
解决办法：在app.vue 文件中加入

body .el-table th.gutter{
    display: table-cell !important;
  }

body .el-table  colgroup.gutter{
    display: table-cell !important;
  }

原先找度娘的解决办法没有用，具体看个人，我把那个方法也写出来
别人亲测说是有用，但我亲测无用
解决办法：删除旧版的依赖，重新下载依赖

npm uninstall element-ui
npm install element-ui@^2.9.1

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

五分糖的苦

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

el-table横向滚动时表头与表体的内容速度不一致（错位）

weixin_44817180的博客

05-11

2513

<div class="table-overflow-x"> <el-table v-if="ifCollectionAccountSelect != '1'" :data="tableData" ref="dataTable" id="dataTable" style="width: 100%" :height="dataTableHeight" :span-method="arraySpanMethod" empty-text="暂无数据"> ...

el-table打印PDF预览，表头错位的解决方案

yan1915766026的博客

12-17

2520

el-table打印预览PDF，表头错位边框线不显示等问题的解决方案

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

elementui表格中表头宽和内容宽不能自动匹配

weixin_41796860的博客

08-12

1083

elementui表格中表头宽和内容宽不能自动匹配 table中的数据是动态加载出来的，结果表头和内容总宽对不齐，如下图：解决办法设置样式 checkTable是我自己起的表格ID，总之就是将表头中的th，F12打开会看到最后一个是display:none的，只要放开就可以了 ...

vue+element ui合并单元格后，表头和内容不对应问题修改

qq_41451744的博客

07-01

870

vue+element ui合并单元格后，表头和内容不对应问题修改

解决element中el-table中表头和内容错位的方法

weixin_44594219的博客

04-07

8775

解决在部分不兼容的浏览器中出现el-table的表头和内容错位，没有对齐的两种有效方法。

Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）

vidvan的专栏

11-23

7676

Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）

【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx

12-28

在处理复杂的表格布局时，可能会遇到表头错位和固定列错位的问题，尤其是在表头内容较长时。针对这种情况，可以通过编写自定义指令来实现表头根据内容自适应宽度，从而完美解决错位问题。首先，我们要了解如何定义...

el-table 表头循环表头错位

最新发布

02-11

### 解决 el-table 表头循环渲染时出现错位的问题对于 `el-table` 的表头在循环渲染过程中可能出现的错位问题，通常由多种因素引起。一种常见原因是表格体内的数据长度不一致或存在未处理好的换行情况[^2]。为了...

element-ui表格显示隐藏导致表头错乱

真皮的博客

12-02

693

<span v-if="activeName == 'five'"> <el-table-column key='22' prop="interviewResultsStatus" label="面试结果" header-align="center" align="center"> <template slot-scope="scope"> <el-tag v-if="scope.

ElementUI的table表格表头错位问题解决

qq_52337177的博客

11-25

2061

ElementUI的table表格表头错位问题解决

el-table表头和表格列宽不一样

believet93的博客

08-09

3611

1、直接上图： 2、解决办法 2-1、网上找的办法将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！） body .el-table th.gutter{ display: table-cell!important; } 2-2、自己新建css文件common.css，在文件中将上面样式写入 /* 解决element-ui的table...

element UI table 表格表头错位，不需要任何代码就简单的适应一下不就得了

小袁同学的学习日常

02-22

1849

elementUI table 表格表头缩放错位，试了各种方法都不好使的话，就自适应就行了，代码都不用改，少些一个宽度就完事，nice

element表格表头与表体错位问题移位

全易

09-09

1863

原来是这样的：怎么解决问题？如下：意思就是给.el-table加两个css（我这个是less语法啊） th.gutter{ display: table-cell !important; } colgroup.gutter{ display: table-cell !important; } 那么效果如下： ...

element-ui中table表头错位问题

perry

09-01

1万+

body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell!important; } 把这样式添加到index.html中、或者app.vue中（必须是入口文件，才能全局起作用！）...

element ui表头和表格错位问题

weixin_42571234的博客

09-02

658

element ui表头和表格错位问题问题描述新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入问题描述一个搜索框，输入对应关键字之后就跳转到结果页面，把对应数据以表格形式展现出来，其中表格使用了element ui的表格

关于表格表头与表格数据体的对齐问题

望南

02-27

3143

解决表格表头与表格数据体的对齐问题最近在项目遇到了表格的表头与表格数据体无法对齐的问题，找了很多办法，都没实际的作用，研究了一下，在这里记录一下：（所有样式代码均只贴关键部分）首先表格样式 table{ table-layout:fixed //其实这里也可以不加只是为了防止一些特殊情况 } tr{ display:flex } td,th{ width:××% //具体数值根...

elementUI table表头错位问题