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

最新推荐文章于 2024-05-16 10:07:37 发布
最新推荐文章于 2024-05-16 10:07:37 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muriyue6/article/details/115097673
版权

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{
	display: table-cell!important;
}

在main.js文件中引入common.css文件

import '@/style/common.css'

修改后的结果

在这里插入图片描述

mry6
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element踩坑记录1——el-table表格表头与内容对不齐
huangzhin的博客
03-23 1234
element踩坑记录1——el-table表格表头与内容对不齐 解决方法： 在全局样式中写入以下样式 .el-table th.gutter{ display: table-cell!important; }
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
主要介绍了vue中获取滚动table的可视页面宽度，调整表头与列对齐(每列宽度不都相同),需要的朋友可以参考下
el-table滚动条设置及设置滚动条后多出空白列修改
最新发布
JunJiu0420的博客
05-16 250
空白列修改：给el-table-column设置适当的宽度，直到空白列消失。
bootstrap-table 表头和内容宽度不一致解决办法
热门推荐
techan007的专栏
12-22 1万+
在进行bootstrap分页处理的时候，使用bootstrap-table出现表头与内容宽度不一致的情况。如下图： 解决方法： 修改bootstrap-table.js源码，将BootstrapTable.prototype.resetView函数体中的 this.resetHeader(); padding += this.$header.outerHeight();
el-table表头和表格列宽不一样
believet93的博客
08-09 3374
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...
56.elementUI表格调整列宽后表头和内容宽度不一致问题解决
银河与猫的博客
08-10 1569
在项目app.vue文件的style里添加： <style> body .el-table th.gutter{ display:table-cell!important; } </style>
element-ui 中 table表格控件表头和内容列对不齐的问题解决
m0_37856464的博客
04-28 3828
在App.vue中加入如下代码： <style scoped> /deep/ .el-table th.gutter{ /* * 解决element-ui 表格篡位的问题 ???? */ display: table-cell!important; } </style> ...
table自动宽度拉伸
04-06
以下是一个简单的jQuery插件示例，用于实现表格列宽的拖动调整： ```javascript (function($) { $.fn.tableResize = function() { this.each(function() { var $table = $(this); $table.find('th').css('...
table内容出现滚动条和表头对齐问题
05-09
为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`<table>`元素开始...
table表格固定行和列
05-11
然而，当表格数据较多时，滚动浏览可能会导致表头或列宽不易辨识，这时就需要实现“固定行和列”的功能。这个功能使得用户在滚动查看大量数据时，表头和左侧的列始终保持可见，提高用户的阅读体验。 要实现`table...
拖动table标题实现改变td的大小(css+js代码)
12-09
拖动列宽的表格</title> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <style type=”text/css”><!– .bg td{ font-size:12px; text-align:left; line-height:...
解决el-table表头与表格有细微宽度差距
coolsheep_的博客
02-03 878
全局设置 // 为了解决el-table首行缩放后和列宽度有微小的差别的问题 body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell!important; }
elementui表格中表头宽和内容宽不能自动匹配
weixin_41796860的博客
08-12 1012
elementui表格中表头宽和内容宽不能自动匹配 table中的数据是动态加载出来的，结果表头和内容总宽对不齐，如下图： 解决办法 设置样式 checkTable是我自己起的表格ID，总之就是将表头中的th，F12打开会看到最后一个是display:none的，只要放开就可以了 ...
Vue使用ElementUI的Table组件表头与内容不对齐问题
weixin_46448867的博客
03-06 1076
用ElementUI开发后台，使用Table组件时，表头与内容不对齐
拖拽表格，列与表头无法对齐（多级表头时）
weixin_45199952的博客
06-22 523
最近在用jqgrid，但是需要对Header进行多级分组，结果出现下面现象： 然后动态替换掉jqgrid原有的方法，就OK了~ 简单整理了一下JS源码里的内容： { b=a.extend({ useColSpanStyle:!1, groupHeaders:[] },b||{}); return this.each(function(){ this.p.groupHeader=b; v...
elementui的el-table因滚动条表格错位问题
weixin_51010848的博客
08-12 3908
min-width table-layout
vue项目el-table合计行不对齐解决
weixin_70192369的博客
12-21 511
在组件中调用 doLayout() 方法。
解决宽屏下el-table表头错位无法占满宽度100%的问题
随风丶逆风的博客
11-11 4454
问题 在宽屏情况下el-table出现表头错位且无法占满宽度100%的问题： 解决方案 在通用样式文件下，添加如下样式： .el-table th.gutter { display: table-cell !important; } .el-table colgroup.gutter { display: table-cell !important; } 原理 使用display: table-cell可以让标签元素以表格单元格的形式呈现，类似于td标签，此时元素对宽度高度敏感，对margin
el-table表头和内容错位处理
qq_40364610的博客
04-13 490
解决办法：important;important;
el-table 表头列宽计算
06-10
2. 如果没有设置 width，el-table 会根据表头和表格内容的实际宽度进行自适应，但这样可能会导致表头和表格内容的宽度不对齐。 3. 可以通过计算表头的宽度和表格内容的宽度来设置表头列的宽度。首先需要获取表头和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值