What to do if the Vue header is misaligned

Solution to vue table header misalignment: 1. Find the project entry file and add the global style as ".el-table th.gutter{display: table-cell!important;}"; 2. In the global style Write the code in "body .el-table th.gutter {display: table-cell !important}"; 3. Remove the mouse hover to modify the background color event.

The operating environment of this tutorial: Windows 10 system, vue3 version, DELL G3 computer

What should I do if the vue header is misaligned?

vue The solution to the misalignment between the header and the table in the table in element-ui

The header and the table in the table in element-ui appear misaligned Misalignment

Phenomenon:

#Cause: caused by the scaling of the computer display, and it was found that Google browser and 360 browser both have webkit kernels The 360 ​​browser displays normally, but this problem only occurs in Google browser.

Solution

Find the project entry file (emphasis on the blackboard!!), add global style:

.el-table th.gutter{
    display: table-cell!important;
}

Effect:

It looks more pleasing to the eye~

element-ui table style disorder adjustment method

The element-ui table is encapsulated in vue, and then use insert Slots, fixed positioning, etc., resulting in confusion in the style. Here are several solutions to the confusion

1. Lines are not aligned

Write such code in the global style

/* Element-UI 的table 组件出现表格线条不对齐的问题 */
body .el-table th.gutter {
    display: table-cell !important
}

2. Height problem caused by fixed fixation

Write the following code in the global style

.el-table__fixed-right{
    height: 100% !important;
}

3. Remove the mouse Hover changes background color event

/* 去掉鼠标hover事件 */
/* tr {
    pointer-events: none;
} */

Recommended learning: "vue video tutorial"

The above is the detailed content of What to do if the Vue header is misaligned. For more information, please follow other related articles on the PHP Chinese website!