ld-admin-template/packages/app/src/components/table/index.css

.ld-table-wrapper {
  width: 100%;
  border-inline-start: 1px solid var(--border-color-light);
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}

.ld-table {
  --animate-duration: 150ms;

  min-width: 100%;
  padding: 0;
  margin: 0;
  overflow: unset;
  font-size: 14px;
  line-height: 1.5714;
  color: var(--subtitle-font-color);
  text-align: start;
  list-style: none;
  border-spacing: 0;
  border-collapse: separate;
  background: var(--layout-background-color);
  border-top: 1px solid var(--border-color-light);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.ld-fixed-table {
  table-layout: fixed;
}

.ld-table-ellipsis {
  & span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

& .ld-table-right-fixed-shadow,
& .ld-table-left-fixed-shadow {
  &::before {
    position: absolute;
    top: 0;
    bottom: -1px;
    width: 30px;
    pointer-events: none;
    content: '';
    transition: box-shadow var(--animate-duration) linear;
  }
}

& .ld-table-right-fixed-shadow {
  &::before {
    left: 0;
    transform: translateX(-100%);
  }
}

& .ld-table-left-fixed-shadow {
  &::before {
    right: 0;
    transform: translateX(100%);
  }
}

& .ld-table-right-fixed-shadow ~ .ld-table-right-fixed-shadow {
  &::before {
    display: none;
  }
}

& .ld-table-left-fixed-shadow:has(~ .ld-table-left-fixed-shadow) {
  &::before {
    display: none;
  }
}

.ld-table-header-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  overflow: hidden;
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}

.ld-table-body-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  & .ld-table {
    border-top: 0;
  }
}

.ld-table-body-tr {
  &:hover {
    & td {
      background-color: var(--background-color);
    }
  }

  & td {
    position: relative;
    min-width: 0;
    padding: 16px;
    overflow-wrap: anywhere;
    background-color: var(--layout-background-color);
    border-inline-end: 1px solid var(--border-color-light);
    border-bottom: 1px solid var(--border-color-light);
    transition: background 0.2s, border-color 0.2s;
  }
}

.ld-table-enabled-right-fixed-shadow {
  & .ld-table-right-fixed-shadow {
    &::before {
      box-shadow: -10px 0 8px -6px rgb(0 0 0 / 10%) inset;
    }
  }
}

.ld-table-enabled-left-fixed-shadow {
  & .ld-table-left-fixed-shadow:not(:has(+ .ld-table-left-fixed-shadow)) {
    border-inline-end-color: transparent;
  }

  & .ld-table-left-fixed-shadow {
    &::before {
      box-shadow: 10px 0 8px -6px rgb(0 0 0 / 10%) inset;
    }
  }
}

.ld-table-fixed-right,
.ld-table-fixed-left {
  position: sticky !important;
  z-index: 4;
}

.ld-table-head {
  text-align: center;
}

.ld-table-tr-highlight {
  --border-color-light: --primary-color-light;

  & td {
    background-color: var(--primary-color-light) !important;
  }
}

.ld-table-pagination {
  display: flex;
  width: 100%;
  margin-top: 16px;
}

.ld-table-head-th {
  position: relative;
  min-width: 0;
  padding: 16px;
  margin: 0;
  font-weight: 600;
  color: rgb(0 0 0 / 88%);
  text-align: center;
  overflow-wrap: anywhere;
  list-style: none;
  background-color: var(--table-header-color);
  border-inline-end: 1px solid var(--border-color-light);
  border-bottom: 1px solid var(--border-color-light);
  transition: background 0.2s ease;

  &:first-child {
    border-start-start-radius: var(--border-radius);
  }

  &:last-child {
    border-start-end-radius: var(--border-radius);
  }
}

.ld-table-head-th-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ld-table-head-sort-group {
  display: flex;
  flex-direction: column;
  margin-left: 4px;
  font-size: 12px;
  color: var(--tip-font-color);
  cursor: pointer;
}

.ld-table-head-sort-active {
  color: var(--primary-color);
}

.ld-table-preview-transform {
  transform: translate3d(-5vw, -5vh, 0) !important;
}

.ld-table-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  touch-action: none;
  cursor: col-resize;
  user-select: none;
  background: var(--primary-color);
  opacity: 0;

  &:hover {
    opacity: 0.4;
  }
}

.ld-table-resizing {
  opacity: 0.4;
}

.ld-table-tr-preview {
  & td {
    &:first-child {
      border-left: 1px solid var(--border-color) !important;
    }
  }

  &:hover {
    & td {
      background-color: var(--layout-background-color);
    }
  }
}