@opensig/opendesign/lib/table/style/index.css

@charset "UTF-8";
.o-table {
  --table-text-size: var(--o-font_size-text1);
  --table-text-height: var(--o-line_height-text1);
  --table-head-text-size: var(--table-text-size);
  --table-head-text-height: var(--table-text-height);
  --table-head-color: var(--o-color-info2);
  --table-cell-color: var(--o-color-info1);
  --table-disabled-cell-color: var(--o-color-info3);
  --table-fixed-head-shadow: var(--o-shadow-1);
  --table-fixed-col-shadow-size: 16px;
  --table-fixed-col-shadow-gradient:
    rgba(var(--o-grey-14), 0.1), rgba(var(--o-grey-14), 0.045) 41%, rgba(var(--o-grey-14), 0.022) 60%, rgba(var(--o-grey-14), 0) 100%;
  --table-tip-text-size: var(--o-font_size-tip1);
  --table-tip-text-height: var(--o-line_height-tip1);
  --table-tip-color: var(--o-color-info3);
  --table-head-bg: var(--o-color-control5);
  --table-row-hover: var(--o-color-control2-light);
  --table-row-active: var(--o-color-control3-light);
  --table-border-width: 1px;
  --table-border: var(--table-border-width) solid var(--o-color-control4);
  --table-loading-mask: var(--o-color-mask2);
  --table-loading-color: var(--o-color-info2);
  --table-body-min-height: 200px;
  --table-bg-color: var(--o-color-control5);
  --table-disabled-bg-color: var(--o-color-control4-light);
  --table-expand-bg-color: var(--o-color-fill3);
  --table-stripe-bg-color: rgba(var(--o-color-control2-light-raw), 0.4);
  --table-radius: var(--o-radius_control-m);
  --table-head-cell-height: auto;
  --table-cell-height: auto;
  --table-head-cell-padding-x: 16px;
  --table-head-cell-padding-y: 12px;
  --table-cell-padding-x: 16px;
  --table-cell-padding-y: 12px;
  --table-head-cell-padding: var(--table-head-cell-padding-y) var(--table-head-cell-padding-x);
  --table-cell-padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  --table-edge-padding: 32px;
  --table-expand-cell-padding: 32px;
  --table-column-resizer-width: 8px;
  --table-row-icon-size: var(--o-icon_size-m);
  --table-row-icon-gap: 8px;
}

.o-table-small {
  --table-text-size: var(--o-font_size-tip1);
  --table-text-height: var(--o-line_height-tip1);
  --table-head-text-size: var(--table-text-size);
  --table-head-text-height: var(--table-text-height);
  --table-radius: var(--o-radius_control-m);
  --table-head-cell-padding-y: 8px;
  --table-cell-padding-y: 8px;
  --table-edge-padding: 16px;
  --table-expand-cell-padding: 24px;
}

[data-o-theme$=".dark"] .o-table {
  --table-fixed-col-shadow-gradient: rgba(var(--o-grey-1), 0.1), rgba(var(--o-grey-1), 0.045) 80%, rgba(var(--o-grey-1), 0.022) 100%;
}

.o-table {
  position: relative;
  /* 水平外边框宽度 */
  --h-frame-border-width: 0px;
  /* 垂直外边框宽度 */
  --v-frame-border-width: 0px;
  /* 水平内边框宽度 */
  --h-border-width: 0px;
}
.o-table table {
  width: 100%;
  border-spacing: 0;
}
.o-table thead {
  position: relative;
}
.o-table thead:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
  background-size: 100% 1px;
}
@supports (-webkit-overflow-scrolling: touch) {
  .o-table thead:after {
    display: none;
  }
  .o-table thead th {
    border-bottom: var(--table-border);
  }
}
.o-table th,
.o-table td {
  box-sizing: border-box;
}
.o-table th,
.o-table .o-table-column-as-header {
  text-align: left;
  font-weight: 600;
  background-color: var(--table-head-bg);
  padding: var(--table-head-cell-padding);
  font-size: var(--table-head-text-size);
  line-height: var(--table-head-text-height);
  color: var(--table-head-color);
  height: var(--table-head-cell-height);
}
.o-table td {
  padding: var(--table-cell-padding);
  font-size: var(--table-text-size);
  line-height: var(--table-text-height);
  background-color: var(--table-bg-color);
  color: var(--table-cell-color);
  height: var(--table-cell-height);
}
.o-table .o-table-row-disabled td {
  background-color: var(--table-disabled-bg-color);
  color: var(--table-disabled-cell-color);
}
.o-table th:first-child,
.o-table td:first-child {
  padding-left: var(--table-edge-padding);
}
.o-table th:last-child,
.o-table td:last-child {
  padding-right: var(--table-edge-padding);
}

.o-table-stripe tbody:not(:has([rowspan])) tr:not(.o-table-highlight):nth-child(even) td {
  background-image: linear-gradient(to right, var(--table-stripe-bg-color), var(--table-stripe-bg-color));
}

@media (hover: hover) {
  td.o-table-highlight,
  .o-table-highlight td {
    background-color: var(--table-row-hover);
  }
}
@media (hover: none) {
  td.o-table-highlight,
  .o-table-highlight td {
    background-color: var(--table-row-active);
  }
}

.o-table-wrap {
  border-radius: var(--table-radius);
  overflow: hidden;
}

.o-table thead:has([rowspan]),
.o-table thead:has([colspan]) {
  --h-border-width: var(--table-border-width);
}
.o-table thead:has([rowspan]) tr:not(:last-child) th:not(.o-table-last-header-row-cell),
.o-table thead:has([colspan]) tr:not(:last-child) th:not(.o-table-last-header-row-cell) {
  border-bottom: var(--table-border);
}
.o-table thead:has([rowspan]) th,
.o-table thead:has([colspan]) th {
  border-left: var(--table-border);
}
.o-table thead:has([rowspan]) th.o-cell-first-col,
.o-table thead:has([colspan]) th.o-cell-first-col {
  border-left: none;
}

.o-table-border-all,
.o-table-border-frame {
  border: var(--table-border);
  --h-frame-border-width: var(--table-border-width);
  --v-frame-border-width: var(--table-border-width);
}

.o-table-border-all,
.o-table-border-row {
  --h-border-width: var(--table-border-width);
}
.o-table-border-all td,
.o-table-border-row td {
  border-bottom: var(--table-border);
}

.o-table-border-all tr.o-row-last td,
.o-table-border-frame tr.o-row-last td,
.o-table-border-row tr.o-row-last td {
  border-bottom-color: transparent;
}
.o-table-border-all td.o-cell-last-row,
.o-table-border-frame td.o-cell-last-row,
.o-table-border-row td.o-cell-last-row {
  border-bottom-color: transparent;
}

.o-table-border-all td,
.o-table-border-column td {
  border-right: var(--table-border);
}
.o-table-border-all td.o-cell-last-col,
.o-table-border-column td.o-cell-last-col {
  border-right-color: transparent;
}

.o-table-tip-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-tip-text-size);
  line-height: var(--table-tip-text-height);
  color: var(--table-tip-color);
  min-height: var(--table-body-min-height);
}

.o-table-loading-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--table-tip-text-size);
  line-height: var(--table-tip-text-height);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--table-loading-mask);
  color: var(--table-loading-color);
  border-radius: var(--table-radius);
}

.o-table-loading-label {
  margin-left: 8px;
}

@media (max-width: 1680px) {
  .o-table-medium {
    --table-text-size: var(--o-font_size-tip1);
    --table-text-height: var(--o-line_height-tip1);
    --table-head-cell-padding-y: 8px;
    --table-cell-padding-y: 8px;
    --table-edge-padding: 24px;
    --table-expand-cell-padding: 24px;
    --table-row-icon-size: var(--o-icon_size-s);
  }
}
@media (max-width: 1200px) {
  .o-table-medium {
    --table-radius: var(--o-radius_control-s);
    --table-head-cell-padding-x: 12px;
    --table-cell-padding-x: 12px;
    --table-edge-padding: 20px;
    --table-expand-cell-padding: 16px;
  }
}
@media (max-width: 840px) {
  .o-table-medium {
    --table-text-size: var(--o-font_size-tip2);
    --table-text-height: var(--o-line_height-tip2);
    --table-head-cell-padding-x: 8px;
    --table-cell-padding-x: 8px;
    --table-edge-padding: 8px;
    --table-expand-cell-padding: 12px;
    --table-row-icon-size: var(--o-icon_size-m);
  }
}

@media (max-width: 1680px) {
  .o-table-small {
    --table-expand-cell-padding: 16px;
  }
}
@media (max-width: 1200px) {
  .o-table-small {
    --table-text-size: var(--o-font_size-tip2);
    --table-text-height: var(--o-line_height-tip2);
    --table-head-cell-padding-x: 8px;
    --table-cell-padding-x: 8px;
    --table-edge-padding: 8px;
    --table-expand-cell-padding: 12px;
    --table-radius: var(--o-radius_control-s);
  }
}