.tb_table {
  /* table */
  width: 100%;
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
}
.tb_table.transpose {
  /* table */
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.tb_rh,
.tb_row {
  /* All row types */
  width: 100%;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  border-bottom: 1px solid var(--lightgray);
}
.tb_rh.transpose,
.tb_row.transpose {
  /* All row types */
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
}

.tb_ch,
.tb_col {
  /* All column types, these are the main data fields */
  padding: 5px;
}

.tb_rh,
.tb_ch.transpose {
  /* row heading */
  font-weight: bold;
  color: #f00;
}
.tb_ch,
.tb_rh.transpose {
  /* column heading */
  font-weight: bold;
  color: #0f0;
}
.tb_row,
.tb_col.transpose {
  /* row */
}
.tb_col,
.tb_row.transpose {
  /* column */
}
.tb_row.highlight,
.tb_col.transpose.highlight {
  /* highlighted row */
  background: var(--primary);
}
.tb_col.highlight,
.tb_row.transpose.highlight {
  /* highlighted column */
  background: var(--tertiary);
}