ElementUI表格表头行高问题解决

简介: ElementUI表格表头行高问题解决

image.png

前言


在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,如下图所示:

image.png

在网页上搜索了很多的解决办法,都没有作用。后来折磨了一段时间后解决了这个问题,在此进行记录。

一、问题原因


在网页中检查代码时发现没有style来设置表格表头的高度,只有调整.el-main中的line-height属性时表头的高度才会发生变化。

image.png

原因是在主页面中用到了Container布局容器,而在布局容器中对.el-main标签的line-height属性进行了修改,才导致的表头特别高。

二、解决方法


.el-main标签中的line-height属性删除修改为合适的大小即可

image.png

总结


以上便是修改表头的方法,对于用到了布局容器时先检查布局容器,之后再进行对单一组件的修改,之前在网上搜索了很多的方法都不能解决我当下的问题,以后在解决问题前要明白问题到底出在了哪里。

image.png

相关文章
|
5月前
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
6月前
|
JavaScript 前端开发 Java
72jqGrid 分组表头 - 有合并列的样式
72jqGrid 分组表头 - 有合并列的样式
35 0
|
7天前
|
JavaScript
表格换色的实现方法
表格换色的实现方法
|
1月前
表格的表头
表格的表头。
18 0
|
7月前
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
321 0
|
4月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
10月前
element plus表格的表头和内容居中
element plus表格的表头和内容居中
193 0
|
6月前
|
JavaScript 前端开发 Java
71jqGrid 分组表头 - 没有合并列的样式
71jqGrid 分组表头 - 没有合并列的样式
16 0
|
7月前
|
前端开发 JavaScript
Element Plus修改表格行、单元格样式
Element Plus修改表格行、单元格样式
1610 0