element踩坑记录1——el-table表格表头与内容对不齐

最新推荐文章于 2024-01-23 16:08:25 发布
最新推荐文章于 2024-01-23 16:08:25 发布
阅读量1.3k 收藏 1
点赞数 4
分类专栏： element 文章标签： el-table表头与内容不齐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38131507/article/details/115127315
版权
这篇博客主要介绍了在前端开发中遇到的一个表格列宽显示不正常的问题，通过在全局样式中添加特定CSS代码修复了这一问题。具体解决方案是在CSS中定义`.el-table th.gutter`类，设置其`display`属性为`table-cell!important`，确保了列宽的正确显示。
摘要由CSDN通过智能技术生成

问题如下图：

表头与内容对不齐

解决方法：

在全局样式中写入以下样式

.el-table th.gutter{
    display: table-cell!important;
}
huangzhin
关注
专栏目录
vue2/3 - 基于element(ui/plus)实现el-table表格每行可拖动换位置排序，表格列（表头）可拖动交换位置功能效果（table表格可拖曳排序的行和列，用鼠标动态拖拽排序表格行列）
高级前端工程师
03-26 2972
vue2，element ui，vue3，element-plus，el-table，Table表格组件，vue+element表格table拖曳排序行和列，vue +element ,el-table实现行和列拖拽排序，table 行、列拖拽，vue3+element plus表格行列实现拖拽排序，可拖拽移动列和动态排序字段，表格拖拽排序，vue+element表格table让表头列拖动换位置，Table表格实现自定义表头展示+表头拖拽排序，表头c可以拖动交换位置，表头拖拽调整顺序，表格每行可以用鼠标拖着
＜table＞标签创建的表格，表头、表体出现错位的问题
One_Punch_Devil的博客
03-17 965
一般出现表格错位的问题，造成原因一般都是滚动条，当我们把横向的滚动条设为true时，当滚动条出现时，表格就不会出现错位。1.将滚动条设置为显示，或隐藏这两种模式的其中一种，而不是使用auto。2.将表头和表体的长度定位一个固定的值，不会随滚动条的出现而变化。此时进入网页开发着模式会发现表体的空间与表头的空间不一致。当横向滚动条隐藏时，表格就会出现错位。
el-table 表头和表格列宽不一致
mry6的博客
03-22 1815
el-table 表头和表格列宽不一致页面如下图解决办法一解决办法二修改后的结果 页面如下图 解决办法一 将以下样式代码添加到index.html或app.vue中的style标签中 <style> body .el-table th.gutter{ display: table-cell!important; } </style> 解决办法二 自己定义一个common.css文件，在文件中将下面样式引入 body .el-table th.gutter{ di
56.elementUI表格调整列宽后表头和内容宽度不一致问题解决
银河与猫的博客
08-10 1615
在项目app.vue文件的style里添加： <style> body .el-table th.gutter{ display:table-cell!important; } </style>
Vue使用ElementUI的Table组件表头与内容不对齐问题
weixin_46448867的博客
03-06 1173
用ElementUI开发后台，使用Table组件时，表头与内容不对齐
elementui的el-table因滚动条表格错位问题
weixin_51010848的博客
08-12 4113
min-width table-layout
el-table表头和表格列宽不一样
believet93的博客
08-09 3446
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表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
10-17
本文讲解了如何在使用Vue 2.0和Element UI 2.0框架中，给表格的表头添加扩展功能，即在表头内容过长时，通过鼠标悬停显示el-tooltip文字提示，来实现更加友好的用户交互。 在开始介绍代码实现之前，让我们先了解两...
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　2. cell-style 单元格的 style 的回调方法，也可以使用一...
table内容出现滚动条和表头对齐问题
05-09
table内容出现滚动条和表头对齐
vue3+el-table表格表头增加斜线
珊妹的博客
01-25 3302
1.需求 类似excel可以加斜线有双表头，如下图(咱们当时一整个难住，咱们裙裙难受) 2.咱们开始面向百度，找到一个好主意！ 上链接 3.可能会有多级表头所有把table封装了一下，所以我没有用插槽来处理斜线，直接用到了多级表头 //表格组件 <template> <div id="bias-table"> <el-table ref="table" v-loading="props.tableConfig.tableLoading" :data="
解决el-table表头与表格有细微宽度差距
coolsheep_的博客
02-03 898
全局设置 // 为了解决el-table首行缩放后和列宽度有微小的差别的问题 body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell!important; }
element-ui 中 table表格控件表头和内容列对不齐的问题解决
m0_37856464的博客
04-28 3861
在App.vue中加入如下代码： <style scoped> /deep/ .el-table th.gutter{ /* * 解决element-ui 表格篡位的问题 ???? */ display: table-cell!important; } </style> ...
【已解决】解决 el-table滚动条超出表头/表格
bao
07-08 2549
el-table滚动条放到表格内部.
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
vidvan的专栏
11-23 6176
Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）
element plus(ui) table表头与表身不对齐问题
m0_62708401的博客
11-18 2660
element plus(ui) table表头与表身不对齐问题
解决vue+element ui 在使用element表格时，出现表格表头与内容对不齐的问题
qq_59390336的博客
11-28 2441
解决vue+element ui 在使用element表格时，出现表格表头与内容对不齐的问题
el-table设置表格表头和内容的对齐方式及样式
最新发布
ysw716的博客
01-23 1476
el-table设置表格表头和内容的对齐方式及样式
el-table拖动表头对不齐
08-29
el-table拖动表头对不齐的问题可能是由于拖拽表格宽度导致的页面异常所致。在el-table中，如果使用了<el-table-column fixed="right">，拖拽表格宽度可能会导致表头对不齐的情况。 解决这个问题的方法是修改表头列在数组中的位置。通过改变表头列的顺序，可以使表头对齐。具体来说，可以通过修改表头列的顺序来解决这个问题。 你可以尝试重新排列表头列的顺序，或者检查代码中是否有其他与拖拽表格宽度相关的问题。另外，还可以查看是否有其他CSS样式或布局问题导致的表头对不齐。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [VUE-006-el-table拖拽表头页面显示异常（二）](https://blog.csdn.net/weixin_39568072/article/details/122067692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue Element ui实现table列拖动效果](https://download.csdn.net/download/u012976879/10770752)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值