tdesign-mobile-vue/esm/_common/style/mobile/components/table/_index.less

tdesign-mobile-vue

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "./mixins/_text.less";

@import "./mixins/_scrollbar.less";

@import "./mixins/_reset.less";

@border: 1px solid @table-border-color;

@table-fixed-column-z-index: 30;
@table-fixed-header-z-index: 50;
@table-fixed-footer-z-index: 50;
@table-fixed-row-z-index: 70;
@table-fixed-header-virtual-scroll-z-index: @table-fixed-header-z-index + 1;
@table-fixed-footer-virtual-scroll-z-index: @table-fixed-footer-z-index + 1;
@table-right-scrollbar-divider: @table-fixed-row-z-index + 1;
@table-loading-z-index: @table-right-scrollbar-divider + 1;

/** 吸顶表头 Affix 组件，zIndex: 1000。宽度拖拽辅助线层级需高于表头 */
@table-resize-line-z-index: 1001;

.scrollbar {
  .scrollbar();
}

// 底部内容吸底，不能设置滚动条颜色为透明，否则纵向滚动的时候会有表格内容文本穿透滚动条显示
.scrollbar.@{prefix}-table__affixed-footer-elm,
.scrollbar.@{prefix}-table__scrollbar--obvious {
  &::-webkit-scrollbar-track {
    background: @scroll-track-color;
  }
}

// 表尾吸底，且横向滚动条和纵向滚动条同时存在时，为避免双层底部内容重叠造成的视觉颜色加深，特此去除一层的颜色
.@{prefix}-table__affixed-footer-wrap > .scrollbar.@{prefix}-table__affixed-footer-elm,
.@{prefix}-table--width-overflow.@{prefix}-table--footer-affixed .@{prefix}-table__content,
.@{prefix}-table--width-overflow.@{prefix}-table--horizontal-bar-affixed .@{prefix}-table__content {
  &::-webkit-scrollbar-thumb {
    background: transparent;
  }
}

// 文本内容省略需要 overflow: hidden，防止滚动超出视野区域；而过滤功能数据较少时，需要 overflow: initial
.@{prefix}-table.@{prefix}-table--overflow-visible {
  overflow: initial;
}

.@{prefix}-table {
  .reset;

  width: 100%;
  font-size: @table-font;
  color: @table--text-color;
  background-color: @table-bg;
  position: relative;

  /** loading need to be top of fixed columns */
  .@{prefix}-loading--full {
    z-index: @table-loading-z-index;
  }

  .t-table-vertical-align(top);
  .t-table-vertical-align(middle);
  .t-table-vertical-align(bottom);

  .@{prefix}-table__resize-line {
    display: none;
    position: absolute;
    left: 10px;
    width: 0;
    border-left: @border;
    z-index: @table-resize-line-z-index;
  }

  &__column-controller-trigger {
    &.@{prefix}-align-top-right,
    &.@{prefix}-align-bottom-right {
      text-align: right;
    }
  }

  &__column-controller-trigger {
    padding: @table-controller-trigger-padding;
  }

  &__content {
    position: relative;
    .scrollbar();
  }

  &__pagination {
    padding: @table-default-pagination-padding;
    box-sizing: border-box;
  }

  .t-icon {
    font-size: @table-icon-size;
  }

  // table 标签基础样式
  table {
    width: 100%;
    border-spacing: 0;
  }

  .@{prefix}-text-ellipsis {
    line-height: @table-line-height;
    .text-ellipsis();
  }

  th,
  td {
    position: relative;
    padding: @table-cell-padding;
    border-bottom: @border;
    line-height: @table-line-height;
    font-weight: normal;
    overflow-wrap: break-word;
    background-color: inherit;
    box-sizing: border-box;
    text-align: left;
  }

  th.@{prefix}-table__th-drag {
    padding: 0;
    height: 0;
    text-align: center;
  }

  thead td,
  th {
    color: @table-head-text-color;
  }

  td[key="row-select"] {
    padding: @table-td-padding-vertical-top 0 @table-td-padding-vertical-bottom @table-td-padding-horizontal;
  }

  td,
  th {
    &.@{prefix}-align-left {
      text-align: left;
    }

    &.@{prefix}-align-right {
      text-align: right;
    }

    &.@{prefix}-align-center {
      text-align: center;
    }
  }

  tr {
    background-color: @table-bg;
  }

  // 紧凑型表格
  &.@{prefix}-size-s {
    th,
    td {
      padding: @table-padding-small;
    }
  }

  // 宽松型表格
  &.@{prefix}-size-l {
    th,
    td {
      padding: @table-padding-large;
    }
  }

  // 展开/收起列
  .@{prefix}-table__expandable-icon-cell,
  .@{prefix}-table__selection-cell {
    padding: 0;
    height: 0;
  }

  td.@{prefix}-table__handle-draggable {
    text-align: center;
    height: 0;
    padding: 0;
  }

  .@{prefix}-table__cell--selectable > .@{prefix}-checkbox {
    vertical-align: middle;
  }

  .@{prefix}-table__cell--selectable {
    + td,
    + th {
      padding-left: 0;
    }
  }

  // 边框线表格
  &--bordered {
    td,
    th {
      border-left: @border;

      &.@{prefix}-table__cell--fixed-left-last {
        &::before {
          border-right: @border;
        }
      }
    }

    // 合并单元格场景中，:first-child 不再是真正的第一列
    th:first-child,
    td.@{prefix}-table__td-first-col {
      border-left-width: 0;
    }

    // 只有非合并单元格场景才需要设置 first-child
    &:not(.@{prefix}-table--rowspan-colspan) {
      td:first-child {
        border-left-width: 0;
      }
    }

    .@{prefix}-table__content {
      border-left: @border;

      // 覆盖深色模式下，水平和垂直滚动条交汇处的默认白色背景
      &::-webkit-scrollbar-corner {
        background-color: transparent;
      }
    }

    // 表格边框优化，适配固定列/固定表头场景
    .@{prefix}-table__content {
      border: @border;
      border-radius: @border-radius-default;
    }

    .@{prefix}-table--loading {
      border-bottom: @border;
    }

    .@{prefix}-table__pagination {
      // border-top: 0;
      padding: @table-default-pagination-padding;
    }

    .@{prefix}-table__bottom-content + .@{prefix}-table__pagination {
      padding: 0;
    }

    // 固定表头表格底部边框线显示优化
    &.@{prefix}-table__header--fixed {
      .@{prefix}-table__content {
        border-bottom: @border;
      }
    }

    // 合并单元格，隐藏最后一行的下边框，避免和外层边框重复
    .@{prefix}-table__td-last-row {
      border-bottom: none;
    }
  }

  // 斑马线表格
  &--striped {
    &:not(.@{prefix}-table--bordered) {
      th,
      td {
        border-bottom: none;
      }
    }

    &.@{prefix}-table--header-fixed {
      > .@{prefix}-table__content > table > tbody tr:nth-of-type(even) {
        background-color: @table-highlight-bg-color;
      }
    }

    &:not(.@{prefix}-table--header-fixed) {
      > .@{prefix}-table__content > table > tbody > tr:nth-of-type(odd):not(.@{prefix}-table__expanded-row) {
        background-color: @table-highlight-bg-color;
      }
    }

    &.@{prefix}-table--hoverable {
      &.@{prefix}-table__header--fixed {
        tbody tr:nth-of-type(even):hover {
          background-color: @table-highlight-bg-color--hover;
        }
      }

      &:not(.@{prefix}-table__header--fixed) {
        > .@{prefix}-table__content > table > tbody tr:nth-of-type(odd):hover {
          background-color: @table-highlight-bg-color--hover;
        }
      }

      > .@{prefix}-table__content > table > tbody {
        tr {
          transition: background-color @anim-duration-base linear;

          &:hover {
            background-color: @table-highlight-dark-bg-color;
          }
        }
      }
    }
  }

  // 可悬停表格
  &--hoverable {
    tbody {
      tr {
        transition: background-color @anim-duration-base linear;

        &:hover {
          background-color: @table-highlight-dark-bg-color;
        }
      }
    }
  }

  // 文本顶端对齐
  &.@{prefix}-table--align-top {
    tbody {
      td {
        vertical-align: top;
      }
    }
  }

  // column highlight
  .@{prefix}-table__cell--highlight {
    background-color: @table-highlight-bg-color;
  }

  // 20200728 优化表头固定和列固定
  // 表头固定表格
  &__header--fixed {
    table {
      table-layout: fixed;
    }

    th,
    td {
      overflow-wrap: break-word;
    }

    &.@{prefix}-table__header,
    .@{prefix}-table__header {
      width: fit-content;
      position: relative;
      z-index: 5;
      // background-color: @bg-color-secondarycontainer;

      // tr {
      //   background-color: @bg-color-secondarycontainer;
      // }
    }

    .@{prefix}-table__header {
      .scrollbar();
    }

    .@{prefix}-table__body {
      overflow-y: auto;
      width: fit-content;

      .scrollbar();
    }
  }

  &:not(&--bordered) &__cell {
    &--selectable {
      & + td,
      & + th {
        padding-left: 0;
      }
    }
  }

  // 列固定表格
  &__cell--fixed {
    &.@{prefix}-table__header--fixed {
      .@{prefix}-table__header {
        overflow: hidden;
        width: 100%;

        .@{prefix}-table__cell--fixed-left,
        .@{prefix}-table__cell--fixed-right {
          &:last-child::after {
            content: "";
            position: absolute;
            right: -6px;
            width: 6px;
            height: 100%;
            top: 0;
            background-color: @bg-color-secondarycontainer;
          }
        }
      }

      .@{prefix}-table__body {
        overflow: auto scroll;
      }
    }

    .@{prefix}-table__content {
      overflow: auto hidden;
    }

    table {
      table-layout: fixed;
      min-width: 100%;
    }

    th,
    td {
      position: relative;
    }

    .t-table-cell-fixed-before-after();
  }

  // 列宽调整表头单元格
  .@{prefix}-table__cell-resizable {
    position: relative;

    .@{prefix}-table__cell--resizer {
      position: absolute;
      top: 0;
      right: -5px;
      bottom: 0;
      z-index: 10;
      width: 10px;
      cursor: col-resize;
    }
  }

  // 数据行禁用
  .@{prefix}-table__row--disabled {
    color: @table-row-disabled-color;
  }

  // 复杂表头容器
  .@{prefix}-table__cell--title {
    display: flex;
    align-items: center;
  }

  &__column-controller {
    &-desc {
      margin-bottom: @comp-margin-xxl;
    }

    &-block {
      padding: @comp-paddingTB-m @comp-paddingLR-l;
      border: 1px solid @table-border-color;
      border-bottom: 1px solid @table-border-color;

      & + & {
        border-top: 0;
        padding: @comp-paddingTB-l @comp-paddingLR-l;
        border-bottom: 1px solid @table-border-color;
      }
    }

    &--fixed {
      .@{prefix}-checkbox {
        width: 108px;
      }
    }
  }
}

// 表头右侧图标设计规范：有边框时，排序图标靠近右侧边框；无边框时，排序图标紧跟标题内容
.@{prefix}-table--bordered {
  .@{prefix}-table__cell--sortable,
  .@{prefix}-table__cell--filterable {
    .@{prefix}-table__cell--title {
      justify-content: space-between;
    }
  }
}

.@{prefix}-table th.@{prefix}-align-right .@{prefix}-table__cell--title {
  justify-content: flex-end;
}

/**
 * 有边框和无边框的图标排列不一样，需谨慎修改
 * 无边框模式，图标依次紧跟标题
 * 有边框模式，只有一个图标时，图标靠近边框右侧；有两个图标时，排序图标靠近标题，过滤图标靠近边框右侧
 */
.@{prefix}-table__cell--sort-trigger {
  text-align: center;
  vertical-align: text-bottom;

  svg {
    vertical-align: initial;
  }
}

// 表格加载态
.@{prefix}-table--loading {
  position: relative;
}

.@{prefix}-table--loading-progressbar {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  background-color: @brand-color;
  animation: tTableProgressbar 2s ease-in-out;
  animation-fill-mode: both;
}

.@{prefix}-table--loading-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: @text-color-placeholder;
}

.@{prefix}-table__expanded-cell {
  padding-left: 45px;
}

.@{prefix}-table__async-loading {
  text-align: center;
}

.@{prefix}-table__async-loading.@{prefix}-is-load-more {
  cursor: pointer;
}

// 默认空表格
.@{prefix}-table__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: @table-color-empty;
}

.@{prefix}-table__filter-icon,
.@{prefix}-table__sort-icon {
  align-items: center;
  background-color: transparent;
  display: inline-flex;
  cursor: pointer;
  vertical-align: text-bottom;
  transition: @anim-duration-base linear;

  > svg {
    margin-top: 0;
  }
}

.@{prefix}-table__sort-icon {
  // 排序图标临时效果，此处状态修改请慎重，需要背景色明确提醒用户点击区域（不建议将整个表头作为点击区域，还有过滤等其他图标）
  .@{prefix}-is-focus,
  &.@{prefix}-is-focus,
  &:hover {
    color: @table-icon-active-color;
    border-radius: @border-radius-circle;
    transition: @anim-duration-base linear;
  }
}

.@{prefix}-table__filter-icon {
  .@{prefix}-is-focus,
  &.@{prefix}-is-focus,
  &:hover {
    color: @table-icon-active-color;
    transition: @anim-duration-base linear;
  }
}

.@{prefix}-table__filter-pop {
  .@{prefix}-popup__content {
    padding: 0;
  }

  .@{prefix}-table__filter-pop-content {
    .@{prefix}-table__filter-pop-content-inner {
      padding: @comp-paddingTB-l @comp-paddingLR-l;
    }
    .@{prefix}-radio-group {
      display: block;
      height: auto;
    }

    .@{prefix}-checkbox-group {
      display: block;
    }
    .@{prefix}-checkbox,
    .@{prefix}-radio {
      display: block;
      // line-height: 28px;
      margin: @comp-margin-xs 0;
    }

    .@{prefix}-table__filter-pop-content-button {
      border-top: @border;
      padding: @comp-paddingTB-l @comp-paddingLR-l;

      .@{prefix}-button + .@{prefix}-button {
        margin-left: @comp-margin-l;
      }
    }
  }
}

.@{prefix}-table__filter-pop-content-inner {
  > .@{prefix}-input__wrap {
    width: 200px;
  }
}

.@{prefix}-table__filter-pop-content-inner {
  > .@{prefix}-date-range-picker__panel {
    margin: calc(0px - @comp-margin-l);
  }
}

.@{prefix}-table__sort-icon--active {
  color: @table-icon-active-color;
  transition: @anim-duration-base linear;
}

.@{prefix}-table__double-icons {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .@{prefix}-table__sort-icon {
    position: relative;
  }
  .@{prefix}-table-sort-asc {
    top: @table-double-sort-icon-space;
  }
  .@{prefix}-table-sort-desc {
    bottom: @table-double-sort-icon-space;
  }
}

.@{prefix}-table__filter-icon-wrap {
  display: flex;
  align-items: center;
  pointer-events: all;
  height: @table-icon-size;
  width: @table-icon-size;
  margin-left: @table-filter-icon-margin-left;
}

// 有边框模式，排序图标和过滤图标同时存在时，排序图标紧挨标题，过滤图标靠右侧边框
.@{prefix}-table--bordered {
  .@{prefix}-table__filter-icon-wrap {
    justify-content: flex-end;
  }
  // 是否显示表格边框 和 对齐方式都决定着 排序图标 和 筛选图标的排列位置
  .@{prefix}-table__cell--sortable.@{prefix}-table__cell--filterable {
    .@{prefix}-table__filter-icon-wrap {
      justify-content: space-between;
      flex: 1;
    }
  }
}

// 是否显示表格边框 和 对齐方式都决定着 排序图标 和 筛选图标的排列位置
.@{prefix}-table {
  .@{prefix}-align-center {
    .@{prefix}-table__cell--sortable,
    .@{prefix}-table__cell--filterable {
      display: flex;
      justify-content: space-around;
    }
  }
}

.@{prefix}-table__expand-box {
  // padding: @table-td-padding-vertical-top @table-td-padding-horizontal
  //   @table-td-padding-vertical-bottom @table-td-padding-horizontal;
  // display: inline-grid;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  // vertical-align: middle;
  color: @table-icon-default-color;
  cursor: pointer;
  transition: all @anim-duration-base @anim-time-fn-easing 0s;

  &:hover {
    color: @table-icon-active-color;
    transition: @anim-duration-base linear;
  }
}

@keyframes tTableProgressbar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.@{prefix}-table__th-row-select {
  .@{prefix}-table__th-cell-inner {
    display: inline-flex;
    align-items: center;
  }
}

.@{prefix}-table-expandable-icon-cell + .@{prefix}-table__cell--selectable[key="row-select"] {
  padding-left: @comp-margin-s;
}

.@{prefix}-table__filter--bottom-buttons {
  display: flex;
  justify-content: flex-end;
  padding: @comp-paddingTB-l @comp-paddingLR-l;
  border-top: @border;
  > .@{prefix}-button + .@{prefix}-button {
    margin-left: @comp-margin-s;
  }
}

.@{prefix}-table__row-filter-inner {
  position: sticky;
  left: 0;
  text-align: center;
}

.@{prefix}-table__filter-result {
  display: flex;
  align-items: center;
  justify-content: center;
  > .@{prefix}-button {
    margin-left: @comp-margin-s;
  }
}

.@{prefix}-table--layout-fixed {
  table-layout: fixed;
}

.@{prefix}-table--layout-auto {
  table-layout: auto;
}

.@{prefix}-table__ellipsis {
  white-space: nowrap;
  width: 100%;
}

.@{prefix}-table__content {
  overflow: auto;
}

.@{prefix}-table__content--scrollable-to-left {
  .@{prefix}-table__cell--fixed-left-last::after {
    border-right: @table-fixed-cell-border-light;
  }
}

.@{prefix}-table__content--scrollable-to-right {
  .@{prefix}-table__cell--fixed-right-first::after {
    border-left: @table-fixed-cell-border-light;
  }
}

// 可向左滚动时，左边显示固定列显示阴影，右边同理
.@{prefix}-table--bordered {
  &.@{prefix}-table__content--scrollable-to-left {
    .@{prefix}-table__cell--fixed-left-last::after {
      border-right: @table-fixed-cell-border;
    }
  }

  &.@{prefix}-table__content--scrollable-to-right {
    .@{prefix}-table__cell--fixed-right-first::after {
      border-left: @table-fixed-cell-border;
    }
  }
}

.@{prefix}-table__scroll-bar-divider {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  border-right: @border;
  z-index: @table-right-scrollbar-divider;
}

.@{prefix}-table__footer,
.@{prefix}-table__header.@{prefix}-table__header--fixed {
  position: sticky;
  z-index: @table-fixed-header-z-index;
}

// 斑马纹的底部颜色，由业务掌控
.@{prefix}-table:not(.@{prefix}-table--striped) {
  .@{prefix}-table__footer {
    > tr {
      background-color: @bg-color-secondarycontainer;
    }
  }
}
.@{prefix}-table__header--fixed:not(.@{prefix}-table__header--multiple) {
  > tr > th {
    background-color: @bg-color-secondarycontainer;
  }
}

.@{prefix}-table__row--fixed-top,
.@{prefix}-table__row--fixed-bottom {
  position: sticky;
  z-index: @table-fixed-row-z-index;
}

// 表尾冻结的第一行
.@{prefix}-table__row--fixed-bottom-first > td {
  border-top: @border;
}

// 冻结表尾行时，最后一行非冻结行去除下边框
.@{prefix}-table--bordered .@{prefix}-table__content {
  .@{prefix}-table__row--without-border-bottom > td {
    border-bottom: 0;
  }
}

.@{prefix}-table--bordered {
  tbody > tr:last-child > td,
  tfoot > tr:last-child > td {
    border-bottom: 0;
  }

  tfoot > tr:first-child > td {
    border-top: @border;
  }
}

.@{prefix}-table__header.@{prefix}-table__header--fixed {
  top: 0;
}

.@{prefix}-table__footer.@{prefix}-table__footer--fixed {
  bottom: 0;
}

.@{prefix}-table--column-fixed {
  .t-table-cell-fixed-before-after();
  .@{prefix}-table__cell--fixed-left,
  .@{prefix}-table__cell--fixed-right {
    position: sticky;
  }

  .@{prefix}-table__cell--fixed-left {
    z-index: @table-fixed-column-z-index;
  }
  // 层级加 1 ，是为了多级表头中，固定左侧列和右侧列同时出现，且交叉显示的情况
  .@{prefix}-table__cell--fixed-right {
    z-index: @table-fixed-column-z-index + 1;
  }
}

.@{prefix}-table__empty-row {
  > td {
    padding: 0;
    border: 0;
  }
}

.@{prefix}-table:not(.@{prefix}-table--bordered) .@{prefix}-table__header.@{prefix}-table--bordered {
  > tr:first-child > th {
    border-top: @border;
  }
}

.@{prefix}-table--multiple-header {
  .@{prefix}-table__header {
    th.@{prefix}-table__header-th--bordered {
      border-left-width: 1px;
    }
  }
}

.@{prefix}-table__header.@{prefix}-table__header--multiple > tr {
  background-color: @bg-color-container;
}

.@{prefix}-table__tree-op-icon {
  margin-right: @comp-margin-s;
  cursor: pointer;
  display: inline-flex;
  vertical-align: -3px;

  &:hover {
    color: @table-icon-active-color;
    transition: @anim-duration-base linear;
  }
}

.@{prefix}-table__tree-leaf-node .@{prefix}-table__tree-op-icon {
  min-width: 0;
  margin-right: @comp-margin-xxs;
}

// 虚拟滚动游标
.@{prefix}-table__virtual-scroll-cursor {
  position: absolute;
  width: 1px;
  height: 1px;
  transition: transform @anim-duration-base;
}

.@{prefix}-table__virtual-scroll-header {
  position: absolute;
  z-index: @table-fixed-header-virtual-scroll-z-index;
  left: 0;
}

/** 用于隐藏表头滚动条 */
.@{prefix}-table__affixed-header-elm-wrap {
  overflow: hidden;
}

.@{prefix}-table__affixed-header-elm-wrap,
.@{prefix}-table__affixed-header-elm {
  position: absolute;
  left: 0;
  z-index: @table-fixed-header-virtual-scroll-z-index;
}

.@{prefix}-table__affixed-header-elm {
  overflow: auto;
  transition: opacity @anim-duration-base linear;
  opacity: 1;
  // 隐藏表头滚动条：为了 IE10以下的浏览器，暂时不能使用这种方式
  // .hideScrollbar();
}

.@{prefix}-table__affixed-footer-elm {
  overflow: auto;
  z-index: @table-fixed-header-virtual-scroll-z-index - 1;
}

.@{prefix}-table--bordered .@{prefix}-table__affixed-header-elm {
  border: @border;
  border-bottom: 0;
  border-right: 0;
}

.@{prefix}-table--bordered .@{prefix}-table__affixed-footer-elm {
  border-left: @border;
  border-bottom: @border;
}

.@{prefix}-table--multiple-header.@{prefix}-table--bordered {
  .@{prefix}-table__affixed-header-elm {
    border-right: 0;
  }
}

.@{prefix}-is-hidden {
  display: none;
}

.@{prefix}-positive-rotate-90 {
  transform: rotate(90deg);
}

.@{prefix}-negative-rotate-180 {
  transform: rotate(180deg);
}

.@{prefix}-table__expanded-row > td,
.@{prefix}-table__row--full > td {
  padding: 0;
}

/** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在，是为了保证 固定列时，当前行不随内容进行横向滚动 */
.@{prefix}-table__row-full-element {
  padding: @table-cell-padding;
}

.@{prefix}-table__row-full-inner {
  position: sticky;
  left: 0;
}

.@{prefix}-table__row-full-inner:not(.@{prefix}-table__empty) {
  display: inline-block;
}

.@{prefix}-table__tree-col {
  display: flex;
  align-items: center;
}

.@{prefix}-table__tree-col--inline {
  display: inline;
}

.@{prefix}-table--full-height {
  height: 100%;
}

/** 默认最小高度限制为 Empty 高度加表头高度 */
.@{prefix}-table--loading .@{prefix}-table__content {
  min-height: 158px;
}

.@{prefix}-table__handle-draggable:hover,
.@{prefix}-table--row-draggable tr,
.@{prefix}-table__th--drag-sort {
  cursor: move;
}

.@{prefix}-table__ele--draggable-chosen {
  box-shadow: @shadow-1;
}

.@{prefix}-table:not(.@{prefix}-table--row-edit) {
  .@{prefix}-table__cell--editable {
    min-height: 22px;
    line-height: @table-line-height;
    cursor: pointer;

    .t-icon {
      margin-left: @table-td-editalbe-icon-margin;
      font-size: @table-icon-size;
      transition: @anim-duration-base linear;
    }

    &:hover {
      // color: @table-icon-active-color;
      transition: @anim-duration-base linear;
    }
  }
}

/** 吸底的分页器，需要背景色，避免表格文本内容显示穿透 */
.@{prefix}-affix .@{prefix}-table__pagination {
  background-color: @table-bg;
}

.@{prefix}-table--bordered .@{prefix}-affix .@{prefix}-table__pagination {
  border-top: @border;
}

.@{prefix}-table__bottom-content + .@{prefix}-table__pagination-wrap {
  .@{prefix}-table__pagination {
    border: 0;
    padding: 0;
  }
}

.@{prefix}-table--column-resizable:not(.@{prefix}-table--bordered) {
  th {
    border-top: 1px solid transparent;
  }

  thead.@{prefix}-table__header:hover {
    th:not(:last-child) {
      border-right: @border;
    }

    th {
      border-top: @border;
    }
  }

  /** 表格左边有冻结列滚动时，去掉hover表头时多出的一个像素，避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */
  &.@{prefix}-table__content--scrollable-to-left.@{prefix}-table__content--scrollable-to-right,
  &.@{prefix}-table__content--scrollable-to-left {
    thead.@{prefix}-table__header:hover {
      .@{prefix}-table__cell--fixed-left-last:not(:last-child) {
        border-right: 0;
      }
    }
  }
}

/** 可选中行的场景下，将 Checkbox 和 Radio 铺满整个单元格，增大点击范围，方便用户选中 */
.@{prefix}-table {
  td.@{prefix}-table__cell-check,
  th.@{prefix}-table__cell-check {
    padding: 0;

    /** HTML 特性: th/td 必须设置为 0，他们的子元素才能设置为 100% */
    height: 0;

    .@{prefix}-radio__label:empty,
    .@{prefix}-checkbox__label:empty {
      display: none;
    }
  }

  .@{prefix}-table__cell-check {
    .@{prefix}-radio,
    .@{prefix}-checkbox,
    .@{prefix}-table__th-cell-inner {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.@{prefix}-table {
  td .@{prefix}-input__tips {
    position: initial;
  }
}

.@{prefix}-table .@{prefix}-table__sort-column {
  background-color: @table-sort-bg-color;
}

// 超出省略的文本，也需要跟着尺寸变化
.@{prefix}-table__ellipsis-content.@{prefix}-size-s .@{prefix}-popup__content {
  font-size: @table-font;
}