@ou-imdt/css/src/native/table.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
  /* Table  */
  --table-width: 100%;
  --table-border: none;
  --table-radius: none;
  --table-border-bottom: 2px solid #333333;
  --table-cell-padding: 0.2rem 0.7rem;
  /* --table-display: block; */
  --table-transition: background 0.25s ease, color 0.25s ease;
  --table-margin: 0 0 1rem 0;
  --table-white-space: normal;
  --table-thead-bg: #333333;
  --table-thead-text-align: left;
  --table-thead-fg: white;
  /* --table-thead-radius: var();
        --table-th-last-radius: var(); */
  --table-thead-weight: bold;
  --table-thead-border-top: initial;
  --table-thead-border-bottom: var(--table-border);
  --table-thead-position: relative;
  --table-tfoot-bg: none;
  --table-tfoot-fg: inherit;
  --table-tfoot-weight: inherit;
  --table-tfoot-border-bottom: initial;
  --table-tfoot-border-top: initial;
  --table-tfoot-position: initial;
  --table-tr-bg: inherit;
  --table-tr-fg: inherit;
  --table-tr-odd-bg: inherit;
  --table-tr-odd-fg: inherit;
  --table-tr-even-bg: inherit;
  --table-tr-even-fg: inherit;
  --table-tr-hover-bg: inherit;
  --table-tr-hover-fg: inherit;
}

table,
th,
td {
  box-sizing: content-box;
}

table {
  --table-display: table;
  width: var(--table-width);
  margin: var(--table-margin);
  border-spacing: 0;
  white-space: var(--table-white-space);
  border: 0;
  overflow: auto;
  position: relative;
  display: var(--table-display);
  border-radius: var(--table-radius);
}

table thead th:last-of-type {
  border-radius: var(--table-th-last-radius);
}

table thead tr:first-of-type {
  border-radius: var(--table-radius);
}

table tbody tr:last-of-type td {
  border-bottom: var(--table-border-bottom);
}

th,
td {
  border: var(--table-border);
  border-top-width: 0;
  border-right-width: 0;
  padding: var(--table-cell-padding)
}

thead th {
  top: 0;
  position: var(--table-thead-position, sticky);
}

th {
  background: var(--table-thead-bg);
  color: var(--table-thead-fg);
  border-top: var(--table-thead-border-top);
  border-bottom: var(--table-thead-border-bottom);
  font-weight: var(--table-thead-weight);
  text-align: var(--table-thead-text-align);
}

tfoot td {
  background: var(--table-tfoot-bg);
  color: var(--table-tfoot-fg);
  bottom: 0;
  position: var(--table-tfoot-position);
  border-top: var(--table-tfoot-border-top, --table-border);
  border-bottom: var(--table-tfoot-border-bottom, --table-border);
  font-weight: var(--table-tfoot-weight, --table-thead-weight);
}

td {
  background: var(--table-tr-bg);
  color: var(--table-tr-fg);
  transition: var(--table-transition);
}

tr :where(th, td):last-child {
  border-right: var(--table-border);
}

/* Hover indicator */
tbody tr:hover td {
  background: var(--table-tr-hover-bg);
  color: var(--table-tr-hover-fg);
}

/* Stating headings class for large tables */
table.static-headings {
  --table-display: block;
  --table-thead-position: sticky;
}