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

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

/* Class that can be applied to divs to make them display as tables */
.table-layout {
  --columns: 2;
  --table-layout-heading-bg: #333333;
  --table-layout-heading-fg: #ffffff;
  --padding: .2rem .7rem;
  display: grid;
  grid-template-columns: repeat(var(--columns), auto);
  padding: var(--padding);

  &>div {
    /* rows */
    display: contents;
  }

  &>div.row-headings>* {
    background: var(--table-layout-heading-bg);
    color: var(--table-layout-heading-fg);
    font-weight: bold;
  }

  &>div>* {
    padding: var(--padding);
  }

  &>div:last-of-type>* {
    border-bottom: 2px solid var(--table-layout-heading-bg);
  }


  &>div:first-of-type>* {
    border-top: 2px solid var(--table-layout-heading-bg);
  }
}