tntd/lib/table/resizableTable/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@table-prefix-cls: ~'@{ant-prefix}-table';
.tnt-resizable-table {
    .react-resizable {
        position: relative;
        background-clip: padding-box;

        .@{table-prefix-cls}-column-title{
            min-width: 22px !important;
            >.tntd-ellipsis{
                min-width: 22px !important;
            }
        }

    }
    .ant-table-thead {
        tr:hover{
            th{
                .react-resizable-handle {
                    &::before{
                        content:'';
                        height: 20px;
                        position: absolute;
                        top:50%;
                        margin-top: -10px;
                        left:4px;
                        width:1px;
                        background-color: @grey-split;
                    }
                }
            }
        }
    }

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

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

    th:last-of-type{
        .react-resizable-handle {
            right: 0;
        }
    }
    // tbody > tr > td > *,
    .ant-table-column-title{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .ant-table-column-sorters {
        display: inline-flex;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-items: center;
    }
}