el-table style problem: How to modify the problem that the buttons in the element-ui table are displayed floating but hidden by the el-table overflow?

Recently, I encountered the overflow hidden problem in writing elment-ui style sheet. I did find it in the console for a long time, and it was more troublesome.
After setting it before
Insert picture description here
setting it
Insert picture description here
, upload the code.

/deep/.el-table tbody tr:hover>td {
    background-color: #242133 !important;
    position: relative;
}


/deep/.el-table__body-wrapper {
    overflow: visible !important;
}
/deep/.el-table .cell{
    overflow: visible !important;
}
/deep/.el-table{
    overflow: visible !important;
}
.tableEditBtn {
    p {
        position: absolute;
        right: 25px;
        bottom: -20px;
        z-index: 999;
        button {
            display: block;
            width: 110px;
            height: 40px;
            background: #3A3949; 
            color: #F7F6FD;
            border: none;
            outline: none;
        }
    }
}

Remarks: For the
bread button in the p tag, when relative positioning is added to the p tag, the z-index attribute must be added, so that its level is greater than the level of el-table

Perfect solution, what other problems have you encountered (⊙o⊙)?

Guess you like

Origin blog.csdn.net/lqlq54321/article/details/110817599