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;
    }
}

  

posted @ 2022-12-02 15:28  安琪吖  阅读(1796)  评论(0编辑  收藏  举报