@radix-ui/themes/src/components/table.css

[](https://radix-ui.com/themes)

.rt-TableRootTable {
  --table-row-background-color: transparent;
  --table-row-box-shadow: inset 0 -1px var(--gray-a5);

  width: 100%;
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
  border-radius: calc(var(--table-border-radius) - 1px);
  border-spacing: 0;
  box-sizing: border-box;

  /* Makes "height: 100%" work on content inside cells */
  height: 0;
}

.rt-TableHeader {
  vertical-align: inherit;
}

.rt-TableBody {
  vertical-align: inherit;
}

.rt-TableRow {
  vertical-align: inherit;
  color: var(--gray-12);
}

.rt-TableCell {
  background-color: var(--table-row-background-color);
  box-shadow: var(--table-row-box-shadow);
  box-sizing: border-box;
  vertical-align: inherit;
  padding: var(--table-cell-padding);
  /* Works as min-height */
  height: var(--table-cell-min-height);

  /* Inset with Table */
  .rt-Inset :where(&:first-child) {
    padding-left: var(--inset-padding-left, var(--table-cell-padding));
  }
  .rt-Inset :where(&:last-child) {
    padding-right: var(--inset-padding-right, var(--table-cell-padding));
  }
}
.rt-TableColumnHeaderCell {
  font-weight: bold;
}
.rt-TableRowHeaderCell {
  font-weight: normal;
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-TableRoot {
    &:where(.rt-r-size-1) {
      --table-border-radius: var(--radius-3);
      --table-cell-padding: var(--space-2);
      --table-cell-min-height: calc(36px * var(--scaling));

      & :where(.rt-TableRootTable) {
        font-size: var(--font-size-2);
        line-height: var(--line-height-2);
      }
    }
    &:where(.rt-r-size-2) {
      --table-border-radius: var(--radius-4);
      --table-cell-padding: var(--space-3);
      --table-cell-min-height: calc(44px * var(--scaling));

      & :where(.rt-TableRootTable) {
        font-size: var(--font-size-2);
        line-height: var(--line-height-2);
      }
    }
    &:where(.rt-r-size-3) {
      --table-border-radius: var(--radius-4);
      --table-cell-padding: var(--space-3) var(--space-4);
      --table-cell-min-height: var(--space-8);

      & :where(.rt-TableRootTable) {
        font-size: var(--font-size-3);
        line-height: var(--line-height-3);
      }
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

/* surface */

.rt-TableRoot:where(.rt-variant-surface) {
  box-sizing: border-box;
  border: 1px solid var(--gray-a5);
  border-radius: var(--table-border-radius);
  background-color: var(--color-panel);
  backdrop-filter: var(--backdrop-filter-panel);
  background-clip: padding-box;
  position: relative;

  /* When possible, use half-transparent gray for nicer border blending with the background */
  @supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
    border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
  }

  & :where(.rt-TableRootTable) {
    overflow: hidden;

    & :where(.rt-TableHeader) {
      --table-row-background-color: var(--gray-a2);
    }
    & :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
      --table-row-box-shadow: none;
    }
  }
}

/* ghost */

.rt-TableRoot:where(.rt-variant-ghost) {
  --scrollarea-scrollbar-horizontal-margin-left: 0;
  --scrollarea-scrollbar-horizontal-margin-right: 0;
}