stk-table-vue 0.8.14 → 0.9.0-beta.1

package/src/StkTable/style.less

@@ -1,579 +1,628 @@
-/**高亮渐暗 */
-@keyframes stk-table-dim {
-    from {
-        background-color: var(--highlight-color);
-    }
-}
-
-.stk-table {
-    /* contain: strict;*/
-    --row-height: 28px;
-    --header-row-height: var(--row-height);
-    --cell-padding-y: 0;
-    --cell-padding-x: 8px;
-    --resize-handle-width: 4px;
-    --border-color: #e8e8f4;
-    --border-width: 1px;
-    --td-bgc: #fff;
-    --td-hover-color: #71a2fd;
-    --td-active-color: #386ccc;
-    --th-bgc: #f1f1f9;
-    --th-color: #272841;
-    --tr-active-bgc: rgb(230, 247, 255);
-    --tr-hover-bgc: rgba(230, 247, 255, 0.7);
-    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
-    --highlight-color: #71a2fd;
-    --highlight-duration: 2s;
-    --highlight-timing-function: linear;
-    /* 斑马纹颜色*/
-    --stripe-bgc: #fafafc;
-
-    --sort-arrow-color: #757699;
-    --sort-arrow-hover-color: #8f90b5;
-    --sort-arrow-active-color: #1b63d9;
-    --sort-arrow-active-sub-color: #cbcbe1;
-
-    --fold-icon-color: #757699;
-    --fold-icon-hover-color: #8f90b5;
-    /** 列宽拖动指示器颜色 */
-    --col-resize-indicator-color: #87879c;
-
-    /** 固定列阴影颜色 */
-    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
-    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);
-
-    /** 拖动行hover背景 */
-    --drag-handle-hover-color: #d0d1e0;
-
-    position: relative;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-
-    /**深色模式 */
-    &.dark {
-        --th-bgc: #202029;
-        --th-color: #c0c0d1;
-        --td-bgc: #1b1b24;
-        --td-hover-color: #70a6ff;
-        --td-active-color: #386ccc;
-        --border-color: #292933;
-        --tr-active-bgc: #283f63;
-        --tr-hover-bgc: #1a2b46;
-        --table-bgc: #1b1b24;
-        /* 不能用rgba，因为固定列时，会变成半透明*/
-        --highlight-color: #1e4c99;
-
-        --stripe-bgc: #202029;
-
-        --sort-arrow-color: #5d6064;
-        --sort-arrow-hover-color: #727782;
-        --sort-arrow-active-color: #d0d1d2;
-        --sort-arrow-active-sub-color: #5d6064;
-
-        --fold-icon-color: #5d6064;
-        --fold-icon-hover-color: #727782;
-
-        --col-resize-indicator-color: #5d6064;
-
-        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
-        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);
-
-        --drag-handle-hover-color: #5d6064;
-
-        /* background-color: var(--table-bgc); */
-        /* ⭐这里加background-color会导致表格出滚动白屏*/
-        color: #d1d1e0;
-    }
-
-    &.headless {
-        &.bordered {
-            border-top: 1px solid var(--border-color);
-            background-image: var(--bg-border-right), var(--bg-border-bottom);
-        }
-    }
-
-    /* 调整列宽的话，表格宽度应当自适应 */
-    &.col-resizable {
-        .stk-table-main {
-            width: fit-content;
-            min-width: min-content;
-        }
-    }
-
-    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
-    &.is-col-resizing {
-        th {
-            pointer-events: none;
-        }
-    }
-
-    &.bordered {
-        /** 
-        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
-        * - box-shadow inset 方案不生效，且占用属性。
-        * - outline 方案绘制在图形外
-        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
-        * - sticky 定位方案需要占用位置。高度为0。
-        */
-        border-left: 1px solid var(--border-color);
-        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
-        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-
-        th,
-        td {
-            background-image: var(--bg-border-right), var(--bg-border-bottom);
-        }
-
-        thead tr:first-child th {
-            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-        }
-    }
-
-    &.bordered-h {
-        border-left: none;
-        --bg-border-right: linear-gradient(transparent, transparent);
-        --bg-border-left: linear-gradient(transparent, transparent);
-    }
-
-    &.bordered-v {
-        --bg-border-bottom: linear-gradient(transparent, transparent);
-        --bg-border-top: linear-gradient(transparent, transparent);
-    }
-
-    &.bordered-body-v {
-        tbody {
-            --bg-border-bottom: linear-gradient(transparent, transparent);
-        }
-    }
-
-    &.bordered-body-h {
-        tbody {
-            --bg-border-right: linear-gradient(transparent, transparent);
-        }
-    }
-
-    &.stripe {
-        &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
-            background-color: var(--stripe-bgc);
-        }
-
-        &.vt-on .stk-tbody-main tr:nth-child(odd) {
-            background-color: var(--stripe-bgc);
-        }
-
-        &.row-hover .stk-tbody-main tr:hover {
-            background-color: var(--tr-hover-bgc);
-        }
-
-        &.row-active .stk-tbody-main tr.active {
-            background-color: var(--tr-active-bgc);
-        }
-    }
-
-    /** more weight for custom row background*/
-    &.row-hover .stk-tbody-main tr:hover {
-        background-color: var(--tr-hover-bgc);
-    }
-
-    &.row-active .stk-tbody-main tr.active {
-        background-color: var(--tr-active-bgc);
-    }
-
-    /* 单元格悬浮 */
-    &.cell-hover tbody td:hover {
-        box-shadow: inset 0 0 0 2px var(--td-hover-color);
-    }
-
-    /* 单元格高亮 */
-    &.cell-active tbody td.active {
-        box-shadow: inset 0 0 0 2px var(--td-active-color);
-    }
-
-    /* td 溢出*/
-    &.text-overflow {
-        .table-cell-wrapper {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    /* th 溢出*/
-    &.header-text-overflow {
-        .table-header-cell-wrapper {
-            white-space: nowrap;
-            overflow: hidden;
-        }
-
-        .table-header-title {
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-    }
-
-    /**虚拟滚动模式 */
-    &.virtual {
-
-        /* 为不影响布局，表头行高要定死*/
-        .table-header-cell-wrapper {
-            overflow: hidden;
-            max-height: calc(var(--header-row-height) * var(--row-span, 1));
-
-            .table-header-title {
-                max-height: inherit;
-            }
-        }
-
-        tbody td {
-            height: var(--row-height);
-
-            .table-cell-wrapper {
-                max-height: var(--row-height);
-                overflow: hidden;
-            }
-        }
-
-        .padding-top-tr td {
-            height: 0;
-        }
-
-        .expand-cell .table-cell-wrapper {
-            white-space: nowrap;
-        }
-
-        // .expanded-row .table-cell-wrapper{
-        //     overflow: auto;
-        // }
-    }
-
-    &.auto-row-height {
-        tbody td {
-            height: unset;
-
-            .table-cell-wrapper {
-                max-height: unset;
-                overflow: initial;
-            }
-        }
-    }
-
-    &.fixed-relative-mode {
-        th {
-            position: relative;
-        }
-
-        .fixed-cell--active {
-            position: relative;
-        }
-    }
-
-    &.scroll-row-by-row {
-        .stk-table-main {
-            position: sticky;
-            top: 0;
-        }
-    }
-
-    .row-by-row-table-height {
-        width: 1px;
-        flex-shrink: 0;
-        position: absolute;
-        left: 0;
-        top: 0;
-    }
-
-    th,
-    td {
-        font-size: 14px;
-        box-sizing: border-box;
-        padding: var(--cell-padding-y) var(--cell-padding-x);
-    }
-
-    th {
-        color: var(--th-color);
-        background-color: inherit;
-        /** 
-         * 保证向上滚动时，表头不被遮挡。
-         * z-index：2 为防止固定列阴影重叠。
-         */
-        z-index: 2;
-        position: sticky;
-
-        &.sortable {
-            cursor: pointer;
-        }
-
-        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
-            .arrow-up {
-                fill: var(--sort-arrow-hover-color);
-            }
-
-            .arrow-down {
-                fill: var(--sort-arrow-hover-color);
-            }
-        }
-
-        &.sorter-desc .table-header-sorter {
-            display: inline;
-
-            .arrow-up {
-                fill: var(--sort-arrow-active-sub-color);
-            }
-
-            .arrow-down {
-                fill: var(--sort-arrow-active-color);
-            }
-        }
-
-        &.sorter-asc .table-header-sorter {
-            display: inline;
-
-            .arrow-up {
-                fill: var(--sort-arrow-active-color);
-            }
-
-            .arrow-down {
-                fill: var(--sort-arrow-active-sub-color);
-            }
-        }
-    }
-
-    thead tr {
-        background-color: var(--th-bgc);
-        height: var(--header-row-height);
-    }
-
-    tbody tr {
-        background-color: var(--td-bgc);
-        height: var(--row-height);
-    }
-
-    .vt-x-left,
-    .vt-x-right {
-        padding: 0;
-    }
-
-    /** 列宽调整指示器 */
-    .column-resize-indicator {
-        width: 0;
-        height: 100%;
-        border-left: 2px solid var(--col-resize-indicator-color);
-        position: absolute;
-        z-index: 10;
-        display: none;
-        pointer-events: none;
-    }
-
-    .stk-table-main {
-        border-spacing: 0;
-        border-collapse: separate;
-        width: fit-content;
-        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
-        min-width: 100%;
-
-        &.fixed-mode {
-            table-layout: fixed;
-            min-width: min-content;
-        }
-    }
-
-    .fixed-cell {
-        background-color: inherit;
-    }
-
-    .highlight-cell {
-        animation-name: stk-table-dim;
-        animation-duration:  var(--highlight-duration);
-        animation-timing-function: var(--highlight-timing-function);
-        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
-    }
-
-    .seq-column {
-        text-align: center;
-    }
-
-    .drag-row-cell {
-        .table-cell-wrapper {
-            display: inline-flex;
-            align-items: center;
-        }
-
-        .drag-row-handle {
-            cursor: grab;
-            border-radius: 4px;
-
-            &:hover {
-                background-color: var(--drag-handle-hover-color);
-            }
-
-            &:active {
-                cursor: grabbing;
-            }
-
-            >svg {
-                vertical-align: -2px;
-            }
-        }
-    }
-
-    .tr-dragging {
-        opacity: 0.5;
-    }
-
-    .tr-dragging-over {
-        background-color: var(--tr-hover-bgc);
-    }
-
-    /*固定列阴影-左*/
-    .fixed-cell--left {
-        --shadow-rotate: 90deg;
-
-        &.fixed-cell--shadow::after {
-            right: -10px;
-        }
-    }
-
-    /*固定列阴影-右*/
-    .fixed-cell--right {
-        --shadow-rotate: -90deg;
-
-        &.fixed-cell--shadow::after {
-            left: -10px;
-        }
-    }
-
-    /*固定列阴影*/
-    .fixed-cell--shadow::after {
-        content: '';
-        width: 10px;
-        height: 100%;
-        top: 0px;
-        position: absolute;
-        pointer-events: none;
-        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
-    }
-
-    .fixed-cell--active {
-        position: sticky;
-    }
-
-    th.fixed-cell--active {
-        z-index: 3;
-    }
-
-    td.fixed-cell--active {
-        z-index: 1;
-    }
-
-    .table-header-cell-wrapper {
-        max-width: 100%;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .table-header-title {
-        overflow: hidden;
-    }
-
-    .table-header-sorter {
-        flex-shrink: 0;
-        margin-left: 4px;
-        width: 16px;
-        height: 16px;
-        display: none;
-
-        .arrow-up,
-        .arrow-down {
-            fill: var(--sort-arrow-color);
-        }
-    }
-
-    .table-header-resizer {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        cursor: col-resize;
-        width: var(--resize-handle-width);
-
-        &.left {
-            left: 0;
-        }
-
-        &.right {
-            right: 0;
-        }
-    }
-
-    /* td inherit tr bgc*/
-    .highlight-row {
-        animation-name: stk-table-dim;
-        animation-duration: var(--highlight-duration);
-        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
-        animation-timing-function: var(--highlight-timing-function);
-    }
-
-    .stk-table-no-data {
-        background-color: var(--table-bgc);
-        line-height: var(--row-height);
-        text-align: center;
-        font-size: 14px;
-        position: sticky;
-        left: 0px;
-        border-right: var(--border-width) solid var(--border-color);
-        border-bottom: var(--border-width) solid var(--border-color);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        &.no-data-full {
-            flex: 1;
-        }
-    }
-
-    .expanded,
-    .tree-expanded {
-        >.table-cell-wrapper .stk-fold-icon::before {
-            transform: rotate(90deg);
-        }
-    }
-
-
-    .stk-fold-icon {
-        display: inline-flex;
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        align-items: center;
-
-        &::before {
-            content: '';
-            display: block;
-            margin: 0 2px;
-            width: 0;
-            height: 0;
-            border-left: 5px solid var(--fold-icon-color);
-            border-top: 4px solid transparent;
-            border-bottom: 4px solid transparent;
-            transition: transform 0.2s ease;
-        }
-
-        &:hover::before {
-            border-left: 5px solid var(--fold-icon-hover-color);
-        }
-    }
-
-    td.cell-hover {
-        background-color: var(--tr-hover-bgc);
-    }
-    
-    td.cell-active {
-        background-color: var(--tr-active-bgc);
-    }
-
+/**高亮渐暗 */
+@keyframes stk-table-dim {
+    from {
+        background-color: var(--highlight-color);
+    }
+}
+
+.stk-table {
+    /* contain: strict;*/
+    --row-height: 28px;
+    --header-row-height: var(--row-height);
+    --cell-padding-y: 0;
+    --cell-padding-x: 8px;
+    --resize-handle-width: 4px;
+    --border-color: #e8e8f4;
+    --border-width: 1px;
+    --td-bgc: #fff;
+    --td-hover-color: #71a2fd;
+    --td-active-color: #386ccc;
+    --th-bgc: #f1f1f9;
+    --th-color: #272841;
+    --tr-active-bgc: rgb(230, 247, 255);
+    --tr-hover-bgc: rgba(230, 247, 255, 0.7);
+    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
+    --highlight-color: #71a2fd;
+    --highlight-duration: 2s;
+    --highlight-timing-function: linear;
+    /* 斑马纹颜色*/
+    --stripe-bgc: #fafafc;
+
+    --sort-arrow-color: #757699;
+    --sort-arrow-hover-color: #8f90b5;
+    --sort-arrow-active-color: #1b63d9;
+    --sort-arrow-active-sub-color: #cbcbe1;
+
+    --fold-icon-color: #757699;
+    --fold-icon-hover-color: #8f90b5;
+    /** 列宽拖动指示器颜色 */
+    --col-resize-indicator-color: #87879c;
+
+    /** 固定列阴影颜色 */
+    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
+    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);
+
+    /** 拖动行hover背景 */
+    --drag-handle-hover-color: #d0d1e0;
+    
+    /** 自定义滚动条颜色 */
+    --sb-thumb-color: #c1c1d7;
+    --sb-thumb-hover-color: #a8a8c1;
+
+    position: relative;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    /**深色模式 */
+    &.dark {
+        --th-bgc: #202029;
+        --th-color: #c0c0d1;
+        --td-bgc: #1b1b24;
+        --td-hover-color: #70a6ff;
+        --td-active-color: #386ccc;
+        --border-color: #292933;
+        --tr-active-bgc: #283f63;
+        --tr-hover-bgc: #1a2b46;
+        --table-bgc: #1b1b24;
+        /* 不能用rgba，因为固定列时，会变成半透明*/
+        --highlight-color: #1e4c99;
+
+        --stripe-bgc: #202029;
+
+        --sort-arrow-color: #5d6064;
+        --sort-arrow-hover-color: #727782;
+        --sort-arrow-active-color: #d0d1d2;
+        --sort-arrow-active-sub-color: #5d6064;
+
+        --fold-icon-color: #5d6064;
+        --fold-icon-hover-color: #727782;
+
+        --col-resize-indicator-color: #5d6064;
+
+        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
+        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);
+
+        --drag-handle-hover-color: #5d6064;
+
+         --sb-thumb-color: rgba(93, 96, 100, .9);
+         --sb-thumb-hover-color: rgb(114, 119, 130);
+
+        /* background-color: var(--table-bgc); */
+        /* ⭐这里加background-color会导致表格出滚动白屏*/
+        color: #d1d1e0;
+    }
+
+    &.scrollbar-on {
+        overflow: hidden;
+    }
+
+    &.headless {
+        &.bordered {
+            border-top: 1px solid var(--border-color);
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
+    }
+
+    /* 调整列宽的话，表格宽度应当自适应 */
+    &.col-resizable {
+        .stk-table-main {
+            width: fit-content;
+            min-width: min-content;
+        }
+    }
+
+    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
+    &.is-col-resizing {
+        th {
+            pointer-events: none;
+        }
+    }
+
+    &.bordered {
+        /** 
+        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
+        * - box-shadow inset 方案不生效，且占用属性。
+        * - outline 方案绘制在图形外
+        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
+        * - sticky 定位方案需要占用位置。高度为0。
+        */
+        border-left: 1px solid var(--border-color);
+        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
+        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+
+        th,
+        td {
+            background-image: var(--bg-border-right), var(--bg-border-bottom);
+        }
+
+        thead tr:first-child th {
+            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+        }
+    }
+
+    &.bordered-h {
+        border-left: none;
+        --bg-border-right: linear-gradient(transparent, transparent);
+        --bg-border-left: linear-gradient(transparent, transparent);
+    }
+
+    &.bordered-v {
+        --bg-border-bottom: linear-gradient(transparent, transparent);
+        --bg-border-top: linear-gradient(transparent, transparent);
+    }
+
+    &.bordered-body-v {
+        tbody {
+            --bg-border-bottom: linear-gradient(transparent, transparent);
+        }
+    }
+
+    &.bordered-body-h {
+        tbody {
+            --bg-border-right: linear-gradient(transparent, transparent);
+        }
+    }
+
+    &.stripe {
+        &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
+            background-color: var(--stripe-bgc);
+        }
+
+        &.vt-on .stk-tbody-main tr:nth-child(odd) {
+            background-color: var(--stripe-bgc);
+        }
+
+        &.row-hover .stk-tbody-main tr:hover {
+            background-color: var(--tr-hover-bgc);
+        }
+
+        &.row-active .stk-tbody-main tr.active {
+            background-color: var(--tr-active-bgc);
+        }
+    }
+
+    /** more weight for custom row background*/
+    &.row-hover .stk-tbody-main tr:hover {
+        background-color: var(--tr-hover-bgc);
+    }
+
+    &.row-active .stk-tbody-main tr.active {
+        background-color: var(--tr-active-bgc);
+    }
+
+    /* 单元格悬浮 */
+    &.cell-hover tbody td:hover {
+        box-shadow: inset 0 0 0 2px var(--td-hover-color);
+    }
+
+    /* 单元格高亮 */
+    &.cell-active tbody td.active {
+        box-shadow: inset 0 0 0 2px var(--td-active-color);
+    }
+
+    /* td 溢出*/
+    &.text-overflow {
+        .table-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    /* th 溢出*/
+    &.header-text-overflow {
+        .table-header-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        .table-header-title {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    /**虚拟滚动模式 */
+    &.virtual {
+
+        /* 为不影响布局，表头行高要定死*/
+        .table-header-cell-wrapper {
+            overflow: hidden;
+            max-height: calc(var(--header-row-height) * var(--row-span, 1));
+
+            .table-header-title {
+                max-height: inherit;
+            }
+        }
+
+        tbody td {
+            height: var(--row-height);
+
+            .table-cell-wrapper {
+                max-height: var(--row-height);
+                overflow: hidden;
+            }
+        }
+
+        .padding-top-tr td {
+            height: 0;
+        }
+
+        .expand-cell .table-cell-wrapper {
+            white-space: nowrap;
+        }
+
+        // .expanded-row .table-cell-wrapper{
+        //     overflow: auto;
+        // }
+    }
+
+    &.auto-row-height {
+        tbody td {
+            height: unset;
+
+            .table-cell-wrapper {
+                max-height: unset;
+                overflow: initial;
+            }
+        }
+    }
+
+    &.fixed-relative-mode {
+        th {
+            position: relative;
+        }
+
+        .fixed-cell--active {
+            position: relative;
+        }
+    }
+
+    &.scroll-row-by-row {
+        .stk-table-main {
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    .row-by-row-table-height {
+        width: 1px;
+        flex-shrink: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    th,
+    td {
+        font-size: 14px;
+        box-sizing: border-box;
+        padding: var(--cell-padding-y) var(--cell-padding-x);
+    }
+
+    th {
+        color: var(--th-color);
+        background-color: inherit;
+        /** 
+         * 保证向上滚动时，表头不被遮挡。
+         * z-index：2 为防止固定列阴影重叠。
+         */
+        z-index: 2;
+        position: sticky;
+
+        &.sortable {
+            cursor: pointer;
+        }
+
+        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
+            .arrow-up {
+                fill: var(--sort-arrow-hover-color);
+            }
+
+            .arrow-down {
+                fill: var(--sort-arrow-hover-color);
+            }
+        }
+
+        &.sorter-desc .table-header-sorter {
+            display: inline;
+
+            .arrow-up {
+                fill: var(--sort-arrow-active-sub-color);
+            }
+
+            .arrow-down {
+                fill: var(--sort-arrow-active-color);
+            }
+        }
+
+        &.sorter-asc .table-header-sorter {
+            display: inline;
+
+            .arrow-up {
+                fill: var(--sort-arrow-active-color);
+            }
+
+            .arrow-down {
+                fill: var(--sort-arrow-active-sub-color);
+            }
+        }
+    }
+
+    thead tr {
+        background-color: var(--th-bgc);
+        height: var(--header-row-height);
+    }
+
+    tbody tr {
+        background-color: var(--td-bgc);
+        height: var(--row-height);
+    }
+
+    .vt-x-left,
+    .vt-x-right {
+        padding: 0;
+    }
+
+    /** 列宽调整指示器 */
+    .column-resize-indicator {
+        width: 0;
+        height: 100%;
+        border-left: 2px solid var(--col-resize-indicator-color);
+        position: absolute;
+        z-index: 10;
+        display: none;
+        pointer-events: none;
+    }
+
+    .stk-table-main {
+        border-spacing: 0;
+        border-collapse: separate;
+        width: fit-content;
+        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
+        min-width: 100%;
+
+        &.fixed-mode {
+            table-layout: fixed;
+            min-width: min-content;
+        }
+    }
+
+    .fixed-cell {
+        background-color: inherit;
+    }
+
+    .highlight-cell {
+        animation-name: stk-table-dim;
+        animation-duration:  var(--highlight-duration);
+        animation-timing-function: var(--highlight-timing-function);
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
+    }
+
+    .seq-column {
+        text-align: center;
+    }
+
+    .drag-row-cell {
+        .table-cell-wrapper {
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .drag-row-handle {
+            cursor: grab;
+            border-radius: 4px;
+
+            &:hover {
+                background-color: var(--drag-handle-hover-color);
+            }
+
+            &:active {
+                cursor: grabbing;
+            }
+
+            >svg {
+                vertical-align: -2px;
+            }
+        }
+    }
+
+    .tr-dragging {
+        opacity: 0.5;
+    }
+
+    .tr-dragging-over {
+        background-color: var(--tr-hover-bgc);
+    }
+
+    /*固定列阴影-左*/
+    .fixed-cell--left {
+        --shadow-rotate: 90deg;
+
+        &.fixed-cell--shadow::after {
+            right: -10px;
+        }
+    }
+
+    /*固定列阴影-右*/
+    .fixed-cell--right {
+        --shadow-rotate: -90deg;
+
+        &.fixed-cell--shadow::after {
+            left: -10px;
+        }
+    }
+
+    /*固定列阴影*/
+    .fixed-cell--shadow::after {
+        content: '';
+        width: 10px;
+        height: 100%;
+        top: 0px;
+        position: absolute;
+        pointer-events: none;
+        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
+    }
+
+    .fixed-cell--active {
+        position: sticky;
+    }
+
+    th.fixed-cell--active {
+        z-index: 3;
+    }
+
+    td.fixed-cell--active {
+        z-index: 1;
+    }
+
+    .table-header-cell-wrapper {
+        max-width: 100%;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .table-header-title {
+        overflow: hidden;
+    }
+
+    .table-header-sorter {
+        flex-shrink: 0;
+        margin-left: 4px;
+        width: 16px;
+        height: 16px;
+        display: none;
+
+        .arrow-up,
+        .arrow-down {
+            fill: var(--sort-arrow-color);
+        }
+    }
+
+    .table-header-resizer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        cursor: col-resize;
+        width: var(--resize-handle-width);
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+
+    /* td inherit tr bgc*/
+    .highlight-row {
+        animation-name: stk-table-dim;
+        animation-duration: var(--highlight-duration);
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
+        animation-timing-function: var(--highlight-timing-function);
+    }
+
+    .stk-table-no-data {
+        background-color: var(--table-bgc);
+        line-height: var(--row-height);
+        text-align: center;
+        font-size: 14px;
+        position: sticky;
+        left: 0px;
+        border-right: var(--border-width) solid var(--border-color);
+        border-bottom: var(--border-width) solid var(--border-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.no-data-full {
+            flex: 1;
+        }
+    }
+
+    .expanded,
+    .tree-expanded {
+        >.table-cell-wrapper .stk-fold-icon::before {
+            transform: rotate(90deg);
+        }
+    }
+
+
+    .stk-fold-icon {
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        align-items: center;
+
+        &::before {
+            content: '';
+            display: block;
+            margin: 0 2px;
+            width: 0;
+            height: 0;
+            border-left: 5px solid var(--fold-icon-color);
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            transition: transform 0.2s ease;
+        }
+
+        &:hover::before {
+            border-left: 5px solid var(--fold-icon-hover-color);
+        }
+    }
+
+    td.cell-hover {
+        background-color: var(--tr-hover-bgc);
+    }
+    
+    td.cell-active {
+        background-color: var(--tr-active-bgc);
+    }
+
+}
+
+.stk-table:hover .stk-sb-thumb  {
+    opacity: 0.7;
+}
+
+.stk-sb-thumb {
+    z-index: 100;
+    position: sticky;
+    background-color: var(--sb-thumb-color);
+    border-radius: 4px;
+    transition: transform 0.1s ease, opacity 0.5s ease;
+    user-select: none;
+    opacity: 0;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: var(--sb-thumb-hover-color);
+    }
+
+    &:active {
+        opacity: 1;
+        background-color: var(--sb-thumb-hover-color);
+    }
+
+    &.vertical {
+        margin-left: auto;
+        top:0;
+        right: 0;
+        width: var(--sb-width);
+    }
+
+    &.horizontal {
+        margin-top: auto;
+        bottom: 0;
+        left:0;
+        height: var(--sb-height);
+    }
 }