1. 程式人生 > 其它 >vue + element 中el-table 設定表頭固定,固定高度出現空白

vue + element 中el-table 設定表頭固定,固定高度出現空白

.DialogAirLineList-table {
    .el-table .success-row {
        color: #F2FF00 !important;
    }
    .el-table .warning-row {
        color: #FFFFFF !important;
    }
    .el-table tr {
        background: #031f36;
        color: #fff;
        height: 40px;
    }
    .el-table th.is-leaf,
    .el-table td {
        border-color: #00446B !important;
    }
    .el-table--border {
        border: 1px solid #00446B !important;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border: 1px solid #00446B !important;
    }
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        border: #00446B !important;
    }
    .el-table--border:after,
    .el-table--group:after,
    .el-table:before {
        background-color: #00446B !important;
    }

    // 滑鼠滑過背景色
    .el-table__body tr:hover > td {
        background-color: transparent !important;
    }
    .el-table__body tr.current-row > td {
        background-color: transparent !important;
    }
    .el-table {
        background: transparent;
    }
    .el-table th.gutter {
        /*el-table加了gutter後 邊框出現白邊*/
        display: table-cell !important;
    }
    // 隱藏table gutter列和內容區右側的空白 start
    .el-table th.gutter {
        width: 18px !important;
        background: transparent;
        border-bottom: 1px solid #00446B !important;
    }
    .el-table colgroup col[name="gutter"] {
        width: 18px !important;
        background: transparent;
        border-bottom: 1px solid #00446B !important;
    }
    .el-table__body-wrapper::-webkit-scrollbar {
        width: 18px !important;
    }

    .el-button--text {
        color: #21defe;
    }
    .deleteBtn:focus{
        color: #21defe !important;
    }
    .saveBtn:focus{
        color: #f2ff00 !important;
    }
    
    .el-table__row {
        td:not(.is-hidden):last-child {
        right: -1px !important;
        }
    }
    // 修改elementui表格的預設樣式-----------
    .el-table__body-wrapper {
        &::-webkit-scrollbar {
        // 整個滾動條
        width: 0 !important; // 縱向滾動條的寬度
        background: rgba(213, 215, 220, 0.3);
        border: none !important;
        }
        &::-webkit-scrollbar-track {
        // 滾動條軌道
        border: none !important;
        }
    }

    //隱藏table gutter列和內容區右側的空白 start
    .el-table th.gutter {
        display: none !important;
        width: 0 !important;
    }
    .el-table colgroup col[name="gutter"] {
        display: none !important;
        width: 0 !important;
    }

    .el-table__body {
        width: 100% !important;
    }
    .el-input__inner{
        background: transparent;
        color: #fff;
        border: 1px solid #00446B !important;
    }
}