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

相关文章
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
JavaScript 前端开发 Java
72jqGrid 分组表头 - 有合并列的样式
72jqGrid 分组表头 - 有合并列的样式
58 0
|
3月前
|
设计模式 开发框架 前端开发
在DevExpress中使用BandedGridView表格实现多行表头的处理
在DevExpress中使用BandedGridView表格实现多行表头的处理
|
6月前
|
JavaScript
表格换色的实现方法
表格换色的实现方法
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
971 0
element plus表格的表头和内容居中
element plus表格的表头和内容居中
500 0
|
6月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
移动开发 C++
解决iview中表格导出Excel时单元格内不换行的问题
分享一篇解决iview中表格导出Excel时单元格自动换行问题的文章
|
JavaScript 前端开发 Java
71jqGrid 分组表头 - 没有合并列的样式
71jqGrid 分组表头 - 没有合并列的样式
31 0
表格边框设置
其中,rules去表格内行和列的表格线,frame去表格边框。rules=rows去行.rules=cols去列frame=vsides 只显示左右frame=hsides 只显示上下frame=above 只显示上方
681 0