naive-ui/styles/Table.scss

@import "./mixins/mixins.scss";

@include themes-mixin {
  @include b(table) {
    @include once {
      line-height: 1.75;
      font-size: 14px;
      width: 100%;
      border-radius: 6px 6px 0 0;
      text-align: left;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      transition:
        background-color .3s $--n-ease-in-out-cubic-bezier,
        border-color .3s $--n-ease-in-out-cubic-bezier,
        color .3s $--n-ease-in-out-cubic-bezier;
    }
    background: $--table-body-background-color;
    @include e(th) {
      @include once {
        background-clip: padding-box;
        white-space: nowrap;
        transition:
          background-color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier,
          color .3s $--n-ease-in-out-cubic-bezier;
        text-align: inherit;
        padding: 14px 12px;
        vertical-align: inherit;
        text-transform: none;
        border: none;
        font-weight: $--n-strong-weight;
      }
      color: $--table-header-text-color;
      background-color: $--table-header-background-color;
      border-color: $--table-border-color;
      border-bottom: 1px solid $--table-border-color;
      border-right: 1px solid $--table-border-color;
      &:last-child {
        border-right: none;
      }
    }
    @include e(td) {
      @include once {
        transition:
          background-color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier,
          color .3s $--n-ease-in-out-cubic-bezier;
        padding: 12px;
      }
      color: $--table-body-text-color;
      background-color: $--n-table-body-background-color;
      border-right: 1px solid $--table-border-color;
      border-bottom: 1px solid $--table-border-color;
      &:last-child {
        border-right: none;
      }
    }
    @include m(bordered) {
      border: 1px solid $--table-border-color;
      border-radius: 6px;
      @include e(tr) {
        &:last-child {
          @include e(td) {
            border-bottom: none;
          }
        }
      }
    }
    @include m(single-line) {
      @include e(th) {
        border-right: none;
      }
      @include e(td) {
        border-right: none;
      }
    }
    @include m(single-column) {
      @include e(td) {
        border-bottom: none;
      }
    }
  }
}