div.tablecontainer {
  overflow-x: auto;
}

.table thead tr th:first-child,
.table thead tr td:first-child,
.table tbody tr th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.table thead tr th:first-child,
.table thead tr td:first-child {
  z-index: 2;
}

/* Alternating row colors, applied to rows so sticky cells can reference them */
.table tbody tr:nth-child(odd) {
  background-color: hsl(0, 0%, 90%);
}
.table tbody tr:nth-child(even) {
  background-color: hsl(0, 0%, 100%);
}

/* Explicit background on sticky cells to prevent bleed-through */
.table tbody tr:nth-child(odd) th:first-child {
  background-color: hsl(0, 0%, 90%);
}
.table tbody tr:nth-child(even) th:first-child {
  background-color: hsl(0, 0%, 100%);
}

/* Thead sticky cells need explicit backgrounds too */
.table thead tr:first-child th:first-child {
  background-color: hsl(0, 0%, 100%);
}
.table thead tr:last-child td:first-child {
  background-color: hsl(0, 0%, 100%);
}

/* Total rows stand out with a darker background and contrasting text */
.table tbody tr:has(th#row-total-res),
.table tbody tr:has(th#row-total-nonres),
.table tbody tr:has(th#summer-row-total-res),
.table tbody tr:has(th#summer-row-total-nonres) {
  background-color: hsl(220, 50%, 30%);
  color: hsl(0, 0%, 100%);
}

/* Sticky first cell on total rows must match explicitly */
.table tbody tr:has(th#row-total-res) th:first-child,
.table tbody tr:has(th#row-total-nonres) th:first-child,
.table tbody tr:has(th#summer-row-total-res) th:first-child,
.table tbody tr:has(th#summer-row-total-nonres) th:first-child {
  background-color: hsl(220, 50%, 30%);
  color: hsl(0, 0%, 100%);
}