birdpaper-ui/es/table/src/style/table.less

一个通用的 vue3 UI组件库。A common vue3 UI component library.

.bp-table {
  position: relative;
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;

  .bp-table-inner {
    font-feature-settings: "tnum";
    position: relative;
    clear: both;
    box-sizing: border-box;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow-x: auto;

    .text-left {
      text-align: left;
    }

    .text-center {
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    .bp-table-body {
      display: table;
      width: 100%;
      border: none;
      border-spacing: 0;
      table-layout: fixed;
      box-sizing: border-box;

      .bp-table-header-thead {
        background-color: @gary-3;
        display: table-header-group;
        width: 100%;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;

        tr {
          display: table-row;
          vertical-align: inherit;
          border-color: inherit;
          background: none;
          border: none;

          .bp-table-th {
            overflow-wrap: break-word;
            display: table-cell;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 500;
            color: @gary-10;
            background: none;
            line-height: 1;
          }
        }
      }

      .bp-table-body-tbody {
        tr {
          border: none;

          &:hover {
            background-color: @gary-2;
          }

          .bp-table-td {
            border-top: 1px solid @gary-4;
            padding: 9px 16px;
            display: table-cell;

            .bp-table-td-content {
              width: 100%;
              font-size: 13px;
              font-weight: 400;
              word-break: break-all;
              color: @gary-10;
              line-height: 1.8;

              .text-ellipsis {
                width: 100%;
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }

        .bp-table-empty-tr {
          text-align: center;
          height: 120px;

          &-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: @gary-7;
            font-size: 13px;
            letter-spacing: 0.1px;
            .no-select;

            .ri-inbox-2-line {
              color: @gary-6;
              font-size: 28px;
            }
          }
        }
      }
    }
  }

  // 带边框表格
  .bp-table-border {
    .bp-table-header-thead {
      tr {
        .bp-table-th {
          border-right: 1px solid #e8e8e8;

          &:first-child {
            border-left: none;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    .bp-table-body-tbody {
      tr {
        .bp-table-td {
          border-right: 1px solid #e8e8e8;

          &:first-child {
            border-left: none;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }

  // 斑马纹样式
  .bp-table-stripe {
    .bp-table-body {
      .bp-table-body-tbody {
        tr {
          &:nth-child(2n + 2) {
            .bp-table-td {
              background-color: @gary-1;
            }
          }
        }
      }
    }
  }

  // 固定表头
  .bp-table-fixed-header {
    .bp-table-body {
      z-index: 499;
    }
  }
}

.scrollbar {
  width: 30px;
  margin: 0 auto;
}

.bp-table-body-area::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

.bp-table-body-area::-webkit-scrollbar-thumb {
  background-color: @gary-5;
  transition: all 0.2s ease-in-out;
}

.bp-table-body-area::-webkit-scrollbar-track {
  background: @gary-4;
}