ant-design/components/table/style/index.less

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './size';
@import './bordered';

@table-prefix-cls: ~'@{ant-prefix}-table';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
@table-header-icon-color: #bfbfbf;
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  .reset-component;
  position: relative;
  z-index: 0;
  clear: both;
  background: @table-bg;
  border-radius: @border-radius-base;

  // https://github.com/ant-design/ant-design/issues/17611
  table {
    width: 100%;
    text-align: left;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  // ============================= Cell =============================
  &-thead > tr > th,
  &-tbody > tr > td,
  tfoot > tr > th,
  tfoot > tr > td {
    position: relative;
    padding: @table-padding-vertical @table-padding-horizontal;
    overflow-wrap: break-word;
  }

  &-cell-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;

    // Fixed first or last should special process
    &.@{table-prefix-cls}-cell-fix-left-last,
    &.@{table-prefix-cls}-cell-fix-right-first {
      overflow: visible;

      .@{table-prefix-cls}-cell-content {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  // ============================ Title =============================
  &-title {
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  // ============================ Footer ============================
  &-footer {
    padding: @table-padding-vertical @table-padding-horizontal;
    color: @table-footer-color;
    background: @table-footer-bg;
  }

  // ============================ Header ============================
  &-thead {
    > tr {
      > th {
        color: @table-header-color;
        font-weight: 500;
        text-align: left;
        background: @table-header-bg;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        transition: background 0.3s ease;

        &[colspan]:not([colspan='1']) {
          text-align: center;
        }
      }
    }

    > tr:not(:last-child) > th {
      &[colspan] {
        border-bottom: 0;
      }
    }
  }

  // ============================= Body =============================
  &-tbody {
    > tr {
      > td {
        border-bottom: @border-width-base @border-style-base @border-color-split;
        transition: background 0.3s;
      }

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

      &.@{table-prefix-cls}-row-selected {
        > td {
          background: @table-selected-row-bg;
          border-color: rgba(0, 0, 0, 0.03);
        }

        &:hover {
          > td {
            background: @table-selected-row-hover-bg;
          }
        }
      }

      // ========================= Nest Table ===========================
      .@{table-prefix-cls}-wrapper:only-child {
        .@{table-prefix-cls} {
          margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
                ceil(@font-size-sm * 1.4));

          td {
            background: transparent;
          }

          &-tbody > tr:last-child > td {
            border-bottom: 0;

            &:first-child,
            &:last-child {
              border-radius: 0;
            }
          }
        }
      }
    }
  }

  // =========================== Summary ============================
  tfoot {
    > tr {
      > th,
      > td {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  // ========================== Pagination ==========================
  &-pagination.@{ant-prefix}-pagination {
    margin: 16px 0;
  }

  &-pagination {
    &-left {
      float: left;
    }

    &-center {
      text-align: center;
    }

    &-right {
      float: right;
    }
  }

  // ================================================================
  // =                           Function                           =
  // ================================================================

  // ============================ Sorter ============================
  &-thead th.@{table-prefix-cls}-column-has-sorters {
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: @table-header-sort-active-bg;

      .@{table-prefix-cls}-filter-trigger-container {
        background: @table-header-sort-active-filter-bg;
      }
    }
  }

  &-thead th.@{table-prefix-cls}-column-sort {
    background: @table-header-sort-bg;
  }
  td&-column-sort {
    background: @table-body-sort-bg;
  }

  &-column-sorters-with-tooltip {
    display: inline-block;
    width: 100%;
  }

  &-column-sorters {
    display: inline-flex;
    align-items: center;
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  &-column-sorter {
    margin-top: 0.15em;
    margin-bottom: -0.15em;
    margin-left: @padding-xs;
    color: @table-header-icon-color;

    &-full {