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-selection-column-width: 60px;

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

.@{table-prefix-cls} {
  .reset-component;
  position: relative;
  z-index: 0;
  clear: both;

  // 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;
  }

  // weak priority
  td {
    background: @table-bg;
  }

  &-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;
  }

  // ============================ 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] {
          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;
        }

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

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

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

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

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

  // ============================ Sorter ============================
  thead th.@{table-prefix-cls}-column-has-sorters {
    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 {
    display: inline-flex;
    align-items: center;
  }

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

    &-full {
      margin-top: -0.2em;
      margin-bottom: 0;
    }

    &-inner {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
    }

    &-up,
    &-down {
      .iconfont-size-under-12px(11px);

      &.active {
        color: @primary-color;
      }
    }

    &-up + &-down {
      margin-top: -0.42em;
    }
  }

  // ============================ Filter ============================
  &-filter-column {
    display: flex;
    align-items: center;
    margin: -@table-padding-vertical -@table-padding-horizontal;
  }

  &-filter-column-title {
    flex: auto;
    padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
  }

  &-filter-trigger-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex: none;
    align-items: stretch;