Element table header row height problem solution

Preface

In the background management system of a recent project, ElementUI was used when writing the front-end interface, but it was found that the height of the table header was always very high after importing the data table, as shown in the following figure:

I searched a lot for solutions on the web, but to no avail. After a lot of hard work, I finally solved this problem and recorded it here.

Tip: The following is the main content of this article. The following cases can be used for reference

1. Cause of the problem

When checking the code on the web page, I found that there was no style to set the height of the table header. The height of the header will only change when the line-height attribute in .el-main is adjusted.

The reason is that the Container layout container is used in the main page, and line-height attribute of the .el-main tag is modified in the layout container, which causes the header to be particularly high.

2. Solution

Delete the line-height attribute in the .el-main tag or modify it to an appropriate size.

Summarize

The above is the method to modify the header. When a layout container is used, check the layout container first, and then modify the single component. I have searched many methods on the Internet before, but none of them can solve my current problem. In the future, I must understand where the problem lies before solving it.

Vue modifies the height and background color of elementUI table tr th

/* Set the background color of the table header */

.el-table__header th, .el-table__header tr {
background-color: #17B3A3;

color: black;

}

/* Set the height of the table body */

.el-table__body td,.el-table__body th{
padding:1px;

}

/* Set the height of the table header */

.el-table__header td,.el-table__header th{
padding:6px 0px;

}

/* Set the pager height */

.site-wrapper .el-pagination {
margin-top: 5px;

text-align: right;

}

.el-pager li.active {
color: #080909;

cursor: default;

background-color: #17B3A3;

border-radius: 2px;

}

This is the end of this article about solving the problem of Element table header row height. For more relevant Element table header row height content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!