@ttk/component/dz/virtualTable/style.less

ttk组件库

.virtual-table {
    display: flex;
    flex-direction: column;
    font-size: 13px;

    .@{ant-prefix}-spin-nested-loading {
        flex: 1;
        display: flex;
        flex-direction: column;

        .@{ant-prefix}-spin-container {
            flex: 1;
            display: flex;
            flex-direction: column;

            .@{ant-prefix}-table-empty {
                flex: 1;
                display: flex;
                flex-direction: column;

                .@{ant-prefix}-table-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .@{ant-prefix}-table-scroll,
                    .@{ant-prefix}-table-placeholder {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                    }

                    .@{ant-prefix}-table-placeholder {
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }

    .@{ant-prefix}-table-thead > tr th {
        background-color: #eaeaea;
        color: #333333;
        font-weight: bold;
        text-align: center;
        // white-space: nowrap;
        // overflow: hidden;
        border-color: #d9d9d9 !important;
        // text-overflow: ellipsis;
        font-size: 13px;
    }

    .@{ant-prefix}-table-container:before,
    .@{ant-prefix}-table-container:after {
        display: none;
    }

    .virtual-table-row {
        display: flex;
        flex-direction: row;
        background-color: rgba(255,255,255, 0.01);
        font-size: 13px;
        // border-right: 1px solid #d9d9d9;
        &:nth-child(2n) {
            background-color: rgba(216, 216, 216, 0.15);
        }

        &.virtual-table-row-selected {
            background-color: rgba(65, 106, 170, 0.05);
        }

        &.virtual-table-row-hover {
            background-color: rgba(65, 106, 170, 0.1);
        }
    }

    .virtual-table-cell {
        box-sizing: border-box;
        padding: 0 10px;
        border-bottom: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 37px;
        color: #333333;
    }

    .virtual-table-cell-last {
        border-right: none;
        flex: 1 !important;
    }

    .@{ant-prefix}-table-thead > tr > th,
    .@{ant-prefix}-table-tbody > tr > td {
        line-height: 37px;
        padding: 0 10px;
    }

    .@{ant-prefix}-table-scroll {
        border: 1px solid #d9d9d9;
        border-top: none;
        // border-left: none;
        // border-radius: 4px;

        .@{ant-prefix}-table-header,
        .@{ant-prefix}-table-body {
            // margin-right: -6px;
            overflow-y: hidden !important;
        }
    }

    .@{ant-prefix}-table-fixed-left {
        box-shadow: none !important;
        table {
            // width: 100%;
            table-layout: fixed;
            width: fit-content;
        }
        .virtual-table-cell-last{
            border-right: 1px solid #d9d9d9;
        }
    }

    .@{ant-prefix}-table-fixed-right {
        background-color: #fff;
        right: 0;

        table {
            // width: 100%;
            table-layout: fixed;
            width: fit-content;
        }

        .@{ant-prefix}-table-body-outer {
            .@{ant-prefix}-table-fixed {
                border-right: 1px solid #d9d9d9;
            }
            .virtual-table-row{
                border-right: 1px solid #d9d9d9 !important;
            }
            .@{ant-prefix}-table-body-inner {
                overflow-y: hidden !important;
                
            }
        }
    }

    div[class^="virtual-grid-"] {
        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
    }

    .virtual-grid-main-scrollbar {
        top: 0;
        right: 0;
        border-left: 1px solid #d9d9d9;
        background-color: #fff;
    }

    .scroll-hidden {
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .react-resizable {
        position: relative;
        background-clip: padding-box;
    }

    .react-resizable-handle {
        position: absolute;
        width: 10px;
        height: 100%;
        bottom: 0;
        right: -5px;
        cursor: col-resize;
        z-index: 1;
    }

    .div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}