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

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

.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-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, var(--o-color-control-light));
  --table-row-hover: var(--o-color-control2-light);
  --table-row-active: var(--o-color-control3-light);
  --table-border: 1px 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, var(--o-color-control-light));
  --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;
}

.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;
}

.o-table {
  position: relative;
}
.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;
}
.o-table th,
.o-table td {
  box-sizing: border-box;
}
.o-table th {
  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);
  color: var(--table-cell-color);
  height: var(--table-cell-height);
}
.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);
}
@media (hover: hover) {
  .o-table tbody tr:hover:hover {
    background-color: var(--table-row-hover);
  }
}
.o-table tbody tr:active {
  background-color: var(--table-row-active);
}

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

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

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

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

.o-table-border-all th,
.o-table-border-all td,
.o-table-border-column th,
.o-table-border-column td {
  border-right: var(--table-border);
}
.o-table-border-all th.last,
.o-table-border-all td.last,
.o-table-border-column th.last,
.o-table-border-column td.last {
  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 (min-width: 0px) and (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;
  }
}
@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;
  }
}
@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;
  }
}

@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-radius: var(--o-radius_control-s);
  }
}