ng-zorro-antd/table/style/patch.less

An enterprise-class UI components based on Ant Design and Angular

@import "./size";

@table-prefix-cls: ~'@{ant-prefix}-table';
@table-td-cls: ~'@{table-prefix-cls}-td';
@table-th-cls: ~'@{table-prefix-cls}-th';
@table-th-left-cls: ~'@{table-th-cls}-left';
@table-th-right-cls: ~'@{table-th-cls}-right';
@table-td-left-cls: ~'@{table-td-cls}-left';
@table-td-right-cls: ~'@{table-td-cls}-right';

nz-table {
  .@{table-prefix-cls} {
    table {
      border-collapse: separate;
      border-spacing: 0;
    }
  }
}

.box-shadow-left() {
  .@{table-th-right-cls}-sticky,
  .@{table-td-right-cls}-sticky {
    box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

.box-shadow-right() {
  .@{table-th-left-cls}-sticky,
  .@{table-td-left-cls}-sticky {
    box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

.border-left() {
  .@{table-th-right-cls}-sticky,
  .@{table-td-right-cls}-sticky {
    border-right: @border-width-base @border-style-base @border-color-split;
  }
}

.border-right() {
  .@{table-th-left-cls}-sticky,
  .@{table-td-left-cls}-sticky {
    border-left: @border-width-base @border-style-base @border-color-split;
  }
}

.@{table-prefix-cls}-scroll-position-middle,
.@{table-prefix-cls}-scroll-position-left {
  .@{table-td-right-cls}-sticky + .@{table-td-right-cls}-sticky {
    box-shadow: none;
  }

  .@{table-th-right-cls}-sticky + .@{table-th-right-cls}-sticky {
    box-shadow: none;
  }
}


.@{table-th-left-cls}-sticky,
.@{table-th-right-cls}-sticky,
.@{table-td-right-cls}-sticky,
.@{table-td-left-cls}-sticky {
  position: sticky !important;
  z-index: 1;
}

.@{table-td-left-cls}-sticky,
.@{table-td-right-cls}-sticky {
  background: @component-background;
}

.@{table-prefix-cls}-tbody {
  & > tr {
    &:hover {
      & > td {
        &.@{table-td-left-cls}-sticky {
          background: @table-row-hover-bg;
        }

        &.@{table-td-right-cls}-sticky {
          background: @table-row-hover-bg;
        }
      }
    }
  }
}

.@{table-prefix-cls}-thead > tr > th .@{table-prefix-cls}-column-sorters > nz-dropdown {
  position: static !important;
}

.@{table-prefix-cls}-scroll-position-middle {
  .box-shadow-right;
  .box-shadow-left;
}

.@{table-prefix-cls}-scroll-position-left {
  .box-shadow-left;
}

.@{table-prefix-cls}-scroll-position-right {
  .box-shadow-right;
}

.@{table-prefix-cls}-bordered {
  &.@{table-prefix-cls}-scroll-position-middle {
    .border-right;
    .border-left;
  }

  &.@{table-prefix-cls}-scroll-position-left {
    .border-left;
  }

  &.@{table-prefix-cls}-scroll-position-right {
    .border-right;
  }
}


.@{table-prefix-cls}-middle {
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-md @table-padding-horizontal-md;
      }
    }
  }
}

.@{table-prefix-cls}-small {
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
      border: 0;

      > .@{table-prefix-cls}-thead > tr > th {
        &.@{table-th-left-cls}-sticky,
        &.@{table-th-right-cls}-sticky {
          background: @component-background;
        }
      }

      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
      }
    }
  }
}