@cw-devops/bk-magic-vue/lib/ui/table.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-table{
    white-space:normal;
    position:relative;
    overflow:hidden;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    width:100%;
    max-width:100%;
    font-size:12px;
    color:#575961;
}

.bk-table .bk-button-text{
        font-size:12px;
    }

.bk-table:before{
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        height:1px;
        content:'';
        background-color:transparent;
        z-index:1;
    }

.bk-table.bk-table-dark-header th{
            background-color:#f0f1f5;
        }

.bk-table.bk-table-dark-header th :hover{
                background-color:#eaebf0
            }

.bk-table.bk-table-custom-header{
        --customHeaderColor:#000;
    }

.bk-table.bk-table-custom-header th{
            background-color:var(--customHeaderColor);
        }

.bk-table.bk-table-custom-header-hover{
        --customHeaderColorHover:#fff;
    }

.bk-table.bk-table-custom-header-hover th .cell:hover{
            background-color:var(--customHeaderColorHover)
        }

.bk-table thead{
        color:#63656e;
        font-weight:bold
    }

.bk-table thead.is-group th{
                background-color:#f5f7fa;
            }

.bk-table tr{
        background-color:#fff;
    }

.bk-table tr input[type="checkbox"]{
            margin:0;
        }

.bk-table th, .bk-table td{
        height:42px;
        padding:0;
        min-width:0;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        text-overflow:ellipsis;
        vertical-align:middle;
        position:relative;
        text-align:left
    }

.bk-table th.is-center, .bk-table td.is-center{
            text-align:center;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
        }

.bk-table th.is-center .cell, .bk-table td.is-center .cell{
                text-align:center;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center
            }

.bk-table th.is-right, .bk-table td.is-right{
            text-align:right;
            -webkit-box-pack:end;
                -ms-flex-pack:end;
                    justify-content:flex-end;
        }

.bk-table th.is-right .cell, .bk-table td.is-right .cell{
                text-align:right;
                -webkit-box-pack:end;
                    -ms-flex-pack:end;
                        justify-content:flex-end
            }

.bk-table th.gutter, .bk-table td.gutter{
            width:15px;
            border-right-width:0;
            border-bottom-width:0;
            padding:0;
        }

.bk-table th.is-hidden > *, .bk-table td.is-hidden > *{
            opacity:0;
            pointer-events:none;
        }

.bk-table th.is-prepend, .bk-table td.is-prepend{
            height:auto;
            background:transparent;
            font-weight:normal;
        }

.bk-table th.is-leaf,
    .bk-table td{
        border-bottom:1px solid #dfe0e5;
        height:43px;
    }

.bk-table th.is-sortable{
        cursor:pointer;
    }

.bk-table .cell{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:normal;
        word-break:break-all;
        padding-left:15px;
        padding-right:15px;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
    }

.bk-table .bk-form-checkbox{
        padding:0;
    }

.bk-table th{
        white-space:nowrap;
        overflow:hidden;
        -webkit-user-select:none;
           -moz-user-select:none;
            -ms-user-select:none;
                user-select:none;
        background-color:#fafbfd;
    }

.bk-table th >.cell{
            position:relative;
            display:-webkit-inline-box;
            display:-ms-inline-flexbox;
            display:inline-flex;
            -webkit-box-pack:left;
                -ms-flex-pack:left;
                    justify-content:left;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            width:100%;
            vertical-align:middle;
            overflow:hidden;
            height:42px;
            line-height:42px;
        }

.bk-table th.required > div:before{
            display:inline-block;
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:#ff4d51;
            margin-right:5px;
            vertical-align:middle;
        }

.bk-table th .bk-table-header-label{
            overflow:hidden;
            white-space:nowrap;
            word-wrap:normal;
            text-overflow:ellipsis;
            font-weight:normal;
            color:#313238;
        }

.bk-table th .bk-table-column-filter-trigger{
            -webkit-box-flex:20px;
                -ms-flex:20px 0 0px;
                    flex:20px 0 0;
            height:20px;
            line-height:20px;
            font-size:14px;
            text-align:center;
            cursor:pointer;
            color:#C4C6CC
        }

.bk-table th .bk-table-column-filter-trigger.is-open{
                color:#63656e;
            }

.bk-table th .bk-table-column-filter-trigger.is-filtered{
                color:#3a84ff;
            }

.bk-table th .bk-table-caret-wrapper{
            display:-webkit-inline-box;
            display:-ms-inline-flexbox;
            display:inline-flex;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            height:20px;
            -webkit-box-flex:20px;
                -ms-flex:20px 0 0px;
                    flex:20px 0 0;
            vertical-align:middle;
            cursor:pointer;
            overflow:visible;
            overflow:initial;
            position:relative;
        }

.bk-table th .bk-table-sort-caret{
            width:0;
            height:0;
            border:solid 5px transparent;
            position:absolute
        }

.bk-table th .bk-table-sort-caret.ascending{
                border-bottom-color:#c0c4cc;
                top:-1px;
            }

.bk-table th .bk-table-sort-caret.descending{
                border-top-color:#c0c4cc;
                bottom:-1px;
            }

.bk-table th.ascending .bk-table-sort-caret.ascending{
            border-bottom-color:#3a84ff;
        }

.bk-table th.descending .bk-table-sort-caret.descending{
            border-top-color:#3a84ff;
        }

.bk-table th:after{
            right:0;
        }

.bk-table th:after, .bk-table th:before{
            position:absolute;
            width:1px;
            height:var(--th-height);
            content:"";
            background:-webkit-gradient(linear, left bottom, left top, from(#CBD5E0), to(rgba(203, 213, 224, 0)));
            background:linear-gradient(360deg, #CBD5E0 0%, rgba(203, 213, 224, 0) 100%);
            opacity:0.5;
        }

.bk-table td.gutter{
        width:0;
    }

.bk-table-medium td{
            height:54px;
        }

.bk-table-medium .cell{
            -webkit-line-clamp:2;
        }

.bk-table-large td{
            height:72px;
            padding:5px 0;
        }

.bk-table-large .cell{
            -webkit-line-clamp:3;
        }

.bk-table .hidden-columns{
        visibility:hidden;
        position:absolute;
        z-index:-1;
    }

.bk-table-row-auto-height .cell{
        display:block;
    }

.bk-table-group,
.bk-table-border,
.bk-table-outer-border{
    border:1px solid #dfe0e5;
    border-radius:2px
}

.bk-table-group:before, .bk-table-border:before, .bk-table-outer-border:before{
        background-color:#dfe0e5;
    }

.bk-table-group:after, .bk-table-border:after, .bk-table-outer-border:after{
        position:absolute;
        top:0;
        right:0;
        width:1px;
        height:100%;
        content:'';
        background-color:#dfe0e5;
        z-index:9;
    }

.bk-table-linear:before{
        top:0;
        bottom:auto;
    }

.bk-table-border{
    border-right:none;
    border-bottom:none;
}

.bk-table-border th, .bk-table-border td{
        border-right:1px solid #dfe0e5
    }

.bk-table-border th:first-child .cell, .bk-table-border td:first-child .cell{
            padding-left:10px;
        }

.bk-table-border th{
        border-bottom:1px solid #dfe0e5;
    }

.bk-table-border th.gutter:last-of-type{
        border-bottom:1px solid #dfe0e5;
    }

.bk-table-hidden{
    visibility:hidden;
}

.bk-table-fixed,
.bk-table-fixed-right{
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .12);
            box-shadow:0 0 10px rgba(0, 0, 0, .12);
    border-bottom:1px solid #dfe0e5;
}

.bk-table-fixed tr.bk-table-row-last td.is-last, .bk-table-fixed-right tr.bk-table-row-last td.is-last{
            border-bottom:none;
        }

.bk-table-fixed-right{
    top:0;
    left:auto;
    right:1px;
}

.bk-table-fixed-right-patch{
        position:absolute;
        top:0;
        right:0;
        background-color:#f5f7fa;
        border-bottom:1px solid #dfe0e5;
    }

.bk-table-fixed-right .bk-table-fixed-header-wrapper,
    .bk-table-fixed-right .bk-table-fixed-body-wrapper,
    .bk-table-fixed-right .bk-table-fixed-footer-wrapper{
        left:auto;
        right:0;
    }

.bk-table-fixed-header-wrapper,
.bk-table-fixed-body-wrapper,
.bk-table-fixed-footer-wrapper{
    width:auto;
}

.bk-table-fixed-header-wrapper{
    position:absolute;
    left:0;
    top:0;
    z-index:3;
}

.bk-table-fixed-footer-wrapper{
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
}

.bk-table-fixed-footer-wrapper tbody td{
        border-top:1px solid #dfe0e5;
        background-color:#f5f7fa;
        color:#63656e;
    }

.bk-table-fixed-body-wrapper{
    position:absolute;
    left:0;
    top:37px;
    overflow:hidden;
    z-index:3;
}

.bk-table-fixed-body-wrapper tr.is-expanded-row{
        visibility:hidden;
        pointer-events:none;
    }

.bk-table-footer-wrapper{
    margin-top:-1px;
}

.bk-table-footer-wrapper td{
        border-top:1px solid #dfe0e5;
    }

.bk-table-header,
.bk-table-body,
.bk-table-footer{
    table-layout:fixed;
    border-collapse:separate;
}

.bk-table-header th.has-border{
        border-right:1px solid #dfe0e5;
    }

.bk-table-header-wrapper,
.bk-table-footer-wrapper{
    position:relative;
    overflow:hidden;
}

.bk-table-header-wrapper tbody td, .bk-table-footer-wrapper tbody td{
        background-color:#f5f7fa;
        color:#63656e;
    }

.bk-table-body-wrapper{
    overflow:hidden;
    position:relative
}

.bk-table-body-wrapper.is-scrolling-none ~.bk-table-fixed,
        .bk-table-body-wrapper.is-scrolling-none ~.bk-table-fixed-right{
            -webkit-box-shadow:none;
                    box-shadow:none;
        }

.bk-table-body-wrapper.is-scrolling-left ~.bk-table-fixed{
            -webkit-box-shadow:none;
                    box-shadow:none;
        }

.bk-table-body-wrapper.is-scrolling-right ~.bk-table-fixed-right{
            -webkit-box-shadow:none;
                    box-shadow:none;
        }

.bk-table-body-wrapper .bk-table-border.is-scrolling-right ~.bk-table-fixed-right{
                border-left:1px solid #dfe0e5;
            }

.bk-table-body-wrapper .bk-table-border.is-scrolling-left ~.bk-table-fixed{
                border-right:1px solid #dfe0e5;
            }

.bk-table-fit{
    border-right:0;
    border-bottom:0;
}

.bk-table-fit th.gutter,
    .bk-table-fit td.gutter{
        border-right-width:1px;
    }

.bk-table-scrollable-x .bk-table-body-wrapper::-webkit-scrollbar,
        .bk-table-scrollable-y .bk-table-body-wrapper::-webkit-scrollbar{
            width:8px;
            height:8px;
            background-color:#F5F5F5;
        }

.bk-table-scrollable-x .bk-table-body-wrapper, .bk-table-scrollable-y .bk-table-body-wrapper{
    }

.bk-table-scrollable-x .bk-table-body-wrapper::-webkit-scrollbar-track,
        .bk-table-scrollable-y .bk-table-body-wrapper::-webkit-scrollbar-track{
            -webkit-box-shadow:inset 0 0 6px #fff;
            border-radius:10px;
            background-color:#fff;
        }

.bk-table-scrollable-x .bk-table-body-wrapper, .bk-table-scrollable-y .bk-table-body-wrapper{
    }

.bk-table-scrollable-x .bk-table-body-wrapper::-webkit-scrollbar-thumb,
        .bk-table-scrollable-y .bk-table-body-wrapper::-webkit-scrollbar-thumb{
            border-radius:10px;
            -webkit-box-shadow:inset 0 0 6px #CBD5E0;
            background-color:#CBD5E0;
        }

.bk-table-scrollable-x .bk-table-body-wrapper{
        overflow-x:auto;
    }

.bk-table-scrollable-y .bk-table-body-wrapper{
        overflow-y:auto;
    }

.bk-table-striped .bk-table-body tr.bk-table-row-striped td{
                background-color:#fafafa;
            }

.bk-table-striped .bk-table-body tr.current-row td{
            background-color:#ecf5ff;
        }

.bk-table-body tr.bk-table-row.hover-row > td{
            background-color:#f5f7fa;
        }

.bk-table-body tr.bk-table-row.hover-row.bk-table-row-striped.current-row > td{
                    background-color:#ecf5ff;
                }

.bk-table-body tr.bk-table-row.current-row > td{
        background-color:#ecf5ff;
    }

.bk-table-column-resize-proxy{
    position:absolute;
    left:200px;
    top:0;
    bottom:0;
    width:0;
    border-left:1px solid #3785FF;
    z-index:10;
}

.bk-table-column-resize-head{
    position:absolute;
    left:200px;
    top:0;
    bottom:0;
    width:6px;
    background:#3785FF;
    z-index:10;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    pointer-events:none;
}

.bk-table-enable-row-transition .bk-table-body td{
        -webkit-transition:background-color .25s ease;
        transition:background-color .25s ease;
    }

.bk-table-fluid-height .bk-tale-fixed,
    .bk-table-fluid-height .bk-table-fixed-right{
        bottom:0;
        overflow:hidden;
    }

.bk-table-empty-block{
    min-height:60px;
    text-align:center;
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}

.bk-table-empty-text{
    padding:60px 0;
    color:#63656e;
}

.bk-table-empty-text .bk-table-empty-icon{
        font-size:65px;
        color:#c3cdd7;
    }

.bk-table-expand-column .cell{
        padding:0;
        text-align:center;
    }

.bk-table-expand-icon{
    position:relative;
    cursor:pointer;
    color:#c4c6cc;
    font-size:12px;
    height:20px;
}

.bk-table-expand-icon-expanded > .bk-icon{
        -webkit-transform:rotate(90deg);
                transform:rotate(90deg);
    }

.bk-table-expand-icon > .bk-icon{
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-5px;
        margin-top:-5px;
        -webkit-transition:-webkit-transform 0.2s ease-in-out;
        transition:-webkit-transform 0.2s ease-in-out;
        transition:transform 0.2s ease-in-out;
        transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    }

.bk-table .bk-table-body td.bk-table-expanded-cell{
    padding:0 30px;
    background-color:#fff
}

.bk-table .bk-table-body td.bk-table-expanded-cell:hover{
        background-color:#fff;
    }

.bk-table .bk-table-body td.bk-table-expanded-cell .bk-table:before{
        display:none;
    }

.bk-table .bk-table-body td.bk-table-expanded-cell .bk-table-row-last td{
        border-bottom:none;
    }

th.bk-table-column-selection,
th.bk-table-column-expand,
td.bk-table-column-selection,
td.bk-table-column-expand{
    padding:0;
}

th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table-column-selection .cell, td.bk-table-column-expand .cell{
        padding:0;
        width:100%;
        height:100%;
    }

.bk-table-column-selection .bk-form-checkbox{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        width:100%;
        height:100%;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
    }

.bk-table-column-selection .bk-form-checkbox .bk-checkbox{
            -webkit-box-flex:16px;
                -ms-flex:16px 0 0px;
                    flex:16px 0 0;
        }

.bk-table-column-expand .bk-table-expand-icon{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        width:100%;
        height:100%;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
    }

.bk-table-column-expand .bk-table-expand-icon .bk-icon{
            -webkit-box-flex:12px;
                -ms-flex:12px 0 0px;
                    flex:12px 0 0;
        }

.bk-table-bottom-loading{
    position:relative;
    text-align:center;
    bottom:0;
    height:50px;
    line-height:45px;
    width:100%;
    z-index:777;
}

.bk-table-bottom-loading .bk-table-bottom-loading-spin .bk-icon{
            font-size:15px;
        }

.bk-table-bottom-loading .bk-table-bottom-loading-spin .bk-spin-title{
            color:#979ba5;
            font-size:12px;
        }

.bk-table-pagination-wrapper{
    padding:15px;
    margin-top:-1px;
    position:relative;
    border-top:1px solid #dfe0e5;
}

.bk-table-column-setting{
    border-left:1px solid #dfe0e5;
}

.bk-table-column-setting .cell{
        padding:0;
    }

.bk-table-column-setting .bk-table-setting-icon{
        display:inline-block;
        vertical-align:middle;
        width:24px;
        height:24px;
        line-height:24px;
        font-size:14px;
        color:#979BA5;
        cursor:pointer
    }

.bk-table-column-setting .bk-table-setting-icon:hover{
            color:#63656e;
        }

.bk-table-setting-popover-content-theme.tippy-tooltip{
    padding:15px 0 0;
}

.bk-table-setting-content{
    width:400px;
}

.bk-table-setting-content .content-scroller{
        max-height:317px;
        overflow-y:auto;
    }

.bk-table-setting-content .content-scroller::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-table-setting-content .content-scroller::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-table-setting-content .content-title{
        padding:0 24px;
        margin:0;
        line-height:32px;
        font-size:16px;
        font-weight:normal;
        color:#313238;
    }

.bk-table-setting-content .setting-title{
        font-size:14px;
        padding:0;
        margin:0;
    }

.bk-table-setting-content .setting-title .setting-subtitle{
            display:inline-block;
            color:#979BA5;
            font-size:12px;
            text-indent:-8px
        }

.bk-table-setting-content .setting-title .setting-subtitle.is-limit{
                color:#ff5656;
            }

.bk-table-setting-content .content-fields{
        margin:10px 24px 0;
    }

.bk-table-setting-content .fields-group .fields-checkbox-wrapper{
            display:inline-block;
            width:calc(100% / 3 - 15px);
            margin:10px 15px 0 0;
        }

.bk-table-setting-content .fields-group .fields-checkbox{
            max-width:100%;
        }

.bk-table-setting-content .fields-group .fields-checkbox .bk-checkbox-text{
                display:inline-block;
                max-width:calc(100% - 20px);
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }

.bk-table-setting-content .content-line-height{
        margin:25px 24px 0;
    }

.bk-table-setting-content .content-line-height .link-button-group{
            margin-top:10px;
            font-size:0;
        }

.bk-table-setting-content .content-line-height .link-button{
            min-width:auto;
        }

.bk-table-setting-content .content-options{
        padding:0 10px;
        margin:30px 0 0;
        height:51px;
        line-height:50px;
        font-size:0;
        text-align:right;
        background:#FAFBFD;
        border-top:1px solid #DCDEE5;
    }

.tippy-tooltip.bk-table-filter-panel-theme{
    padding:0;
}

.bk-table-filter-panel{
    min-width:70px;
    background-color:#fff
}

.bk-table-filter-panel.multiple{
        min-width:100px;
    }

.bk-table-filter-panel .panel-search{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:middle;
            -ms-flex-align:middle;
                align-items:middle;
        border-bottom:1px solid #F0F1F5;
    }

.bk-table-filter-panel .panel-search .panel-search-icon{
            -webkit-box-flex:16px;
                -ms-flex:16px 0 0px;
                    flex:16px 0 0;
            margin:0 5px 0 10px;
            font-size:16px;
            line-height:24px;
        }

.bk-table-filter-panel .panel-search .panel-search-input{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
            height:24px;
            border:none;
            outline:none;
            font-size:12px;
        }

.bk-table-filter-panel .panel-list{
        padding:5px 0;
        margin:0;
        max-height:250px;
        list-style:none;
        overflow-y:auto
    }

.bk-table-filter-panel .panel-list::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-table-filter-panel .panel-list::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-table-filter-panel .panel-list .panel-item{
            padding:0 10px;
            font-size:12px;
            line-height:26px;
            cursor:pointer
        }

.bk-table-filter-panel .panel-list .panel-item:hover{
                background-color:#eaf3ff;
                color:#3a84ff;
            }

.bk-table-filter-panel .panel-list .panel-item.is-selected{
                background-color:#f4f6fa;
                color:#3a84ff;
            }

.bk-table-filter-panel .panel-list .panel-item.is-disabled{
                color:#c4c6cc;
            }

.bk-table-filter-panel .panel-list .panel-item.is-hidden{
                display:none;
            }

.bk-table-filter-panel .panel-checkbox-group{
        display:block;
        padding:10px 10px 0 10px;
    }

.bk-table-filter-panel .panel-checkbox-group .panel-checkbox{
            display:block;
            line-height:16px;
            margin-bottom:10px;
        }

.bk-table-filter-panel .panel-checkbox-group .panel-checkbox .bk-checkbox-text{
                font-size:12px;
            }

.bk-table-filter-panel .panel-options{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        height:31px;
        border-top:1px solid #F0F1F5;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
    }

.bk-table-filter-panel .panel-options .panel-options-link{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
            white-space:nowrap;
            margin:0 15px;
        }

.bk-table-filter-panel .panel-options .panel-options-link .bk-link-text{
                font-size:12px;
            }

.bk-table-filter-panel .panel-options .panel-options-link ~ .panel-options-link{
                margin-left:0;
            }

.bk-table-filter-panel .panel-empty{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        height:32px;
        margin:0;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        font-size:12px;
        font-weight:normal;
    }

.bk-table-expand-icon{
    font-size:20px;
    color:#8797AA;
    position:absolute;
    top:-4px;
}