_tables.scss

Styling tables the modern css way

components/_tables.scss

@use "../abstracts/" as *;

// make the table responsive
.content-table {
  height: fit-content;
  overflow-x: scroll;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
  font-size: $font-size-300;
}

th,
caption {
  text-align: start;
}

caption {
  padding: 1em;
  background-color: $color-neutral-000;
}

thead {
  background-color: $color-neutral-200;
  //border-block: 2px solid $color-neutral-800;
}

tfoot {
  background-color: $color-neutral-200;
  border-block: 2px solid $color-neutral-800;
}

td, th {
  padding: 0.75em 1rem;
  border: 1px solid $color-neutral-300;
  vertical-align: middle;
  white-space: nowrap;
}

// Zebra-Zeilen
tbody {
  // even
  tr:nth-of-type(2n) th,
  tr:nth-of-type(2n) td {
    background-color: $color-neutral-050;
  }
  // odd
  tr:nth-of-type(2n + 1) th,
  tr:nth-of-type(2n + 1) td {}
}