@ozen-ui/kit/__inner__/esm/components/Table/Table.css

React component library

.Table {
  --table-border-color: var(--color-border-secondary);
  border-spacing: 0;
  background-color: var(--color-background-main);
}

  .Table_fullWidth {
    inline-size: 100%;
  }

  .Table_size_xs {
      --table-header-cell-text: var(--typography-text-3xs-font);
      --table-header-cell-padding: 16px 12px 8px;
      --table-cell-text: var(--typography-text-xs-font);
      --table-cell-padding: 12px;
      --table-caption-text: var(--typography-text-xs-font);
      --table-caption-padding: 24px 12px;
    }

  .Table_size_s {
      --table-header-cell-text: var(--typography-text-3xs-font);
      --table-header-cell-padding: 24px 16px 8px;
      --table-cell-text: var(--typography-text-s-font);
      --table-cell-padding: 14px 16px;
      --table-caption-text: var(--typography-text-s-font);
      --table-caption-padding: 24px 16px;
    }

  .Table_size_m {
      --table-header-cell-padding: 28px 20px 12px;
      --table-cell-padding: 16px 20px;
      --table-header-cell-text: var(--typography-text-2xs-font);
      --table-cell-text: var(--typography-text-m-font);
      --table-caption-text: var(--typography-text-m-font);
      --table-caption-padding: 32px 20px;
    }

  .Table_size_l {
      --table-header-cell-text: var(--typography-text-xs-font);
      --table-header-cell-padding: 32px 24px 16px;
      --table-cell-text: var(--typography-text-l-font);
      --table-cell-padding: 18px 24px;
      --table-caption-text: var(--typography-text-l-font);
      --table-caption-padding: 32px 24px;
    }

  .Table_compressed.Table_size_xs {
      --table-header-cell-text: var(--typography-text-3xs-font);
      --table-cell-padding: 4px 12px;
    }

  .Table_compressed.Table_size_s {
      --table-header-cell-text: var(--typography-text-3xs-font);
      --table-cell-padding: 6px 16px;
    }

  .Table_compressed.Table_size_m {
      --table-header-cell-text: var(--typography-text-2xs-font);
      --table-cell-padding: 8px 20px;
    }

  .Table_compressed.Table_size_l {
      --table-header-cell-text: var(--typography-text-xs-font);
      --table-cell-padding: 10px 24px;
    }

  .Table_divider_row .TableCell, .Table_divider_all .TableCell {
        border-block-end: var(--border-width-s) solid var(--table-border-color);
      }

  .Table_divider_column .TableCell:not(:last-child), .Table_divider_all .TableCell:not(:last-child) {
        border-inline-end: var(--border-width-s) solid var(--table-border-color);
      }

  .Table .TableBody .TableRow:last-child .TableCell {
    border-block-end: 0 solid;
  }

  .Table_striped .TableBody .TableRow:nth-child(odd) {
      background-color: var(--color-background-primary);
    }

  .Table_striped .TableBody .TableRow:nth-child(odd) .TableCell:first-child {
        border-start-start-radius: var(--border-radius-xs);
        border-end-start-radius: var(--border-radius-xs);
      }

  .Table_striped .TableBody .TableRow:nth-child(odd) .TableCell:last-child {
        border-start-end-radius: var(--border-radius-xs);
        border-end-end-radius: var(--border-radius-xs);
      }

  .Table_striped .TableCell {
      border: none;
    }

  .Table_stickyHeader .TableHead {
      background-color: var(--color-background-main);
      position: sticky;
      inset-block-start: 0;
    }