@uiw/react-table/src/style/index.less

Table component

@table-prefix: ~'w-table';

.@{table-prefix} {
  width: 100%;
  overflow: auto;
  > table {
    display: table !important;
    margin: 0 !important;
    width: 100% !important;
    border-spacing: 0;
    border-collapse: collapse;
    tr > th,
    tr > td {
      border: 0;
      padding: 5px 8px;
      border-bottom: 1px solid #e8e8e8;
    }
    tr {
      background-color: transparent;
    }
    > caption {
      text-align: left;
      padding: 10px 8px;
    }
    > tbody > tr {
      transition: all 0.3s;
      > td {
        background-color: #fff;
        position: relative;
        z-index: 1;
      }
      &:hover,
      &:hover:nth-child(2n) {
        > td {
          background-color: #efefef;
        }
      }
      &:nth-child(2n) {
        > td {
          background-color: #f9f9f9;
        }
      }
    }
    > thead {
      > tr > th {
        font-weight: normal;
        padding: 8px;
        background-color: #f6f9fb;
        position: relative;
        z-index: 1;
      }
      > tr,
      tr:nth-child(2n) {
        background-color: #f6f9fb;
        border: transparent;
      }
    }
  }
  &-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;
    display: block;
  }
  &-tr-children-center {
    text-align: center;
  }
  &-tr-children-left {
    text-align: left;
  }
  &-tr-children-right {
    text-align: right;
  }
  &-fixed-true {
    position: sticky !important;
    z-index: 2 !important;
    // border: 0; 透风 1px
  }
  &-fixed-right {
    position: sticky !important;
    z-index: 2 !important;
    // border: 0; 透风 1px
  }
  &-fixed-true::after {
    box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 15%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1px;
    width: 30px;
    transform: translateX(100%);
    transition: box-shadow 0.3s;
    content: '';
    pointer-events: none;
  }
  &-fixed-true::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #dfe2e5;
  }
  &-fixed-right::after {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    width: 30px;
    transform: translateX(-100%);
    transition: box-shadow 0.3s;
    content: '';
    pointer-events: none;
    border-right: 1px solid #f0f0f0;
  }
  &-fixed-right-first::after {
    box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);
  }
  &-fixed-right::before {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    border-right: 1px solid #dfe2e5;
  }
  &-bordered {
    > table {
      tr > th,
      tr > td,
      > caption {
        border: 1px solid #dfe2e5;
      }
      > caption {
        border-bottom: 0;
      }
    }
  }
  &-bordered &-footer {
    border: 1px solid #dfe2e5;
    border-top: 0;
  }
  &-footer {
    background: #fafafa;
    padding: 10px 8px;
  }
}