/* Tabella dentro un riquadro che scorre, con l'intestazione ferma in cima.

   Serve quando le righe sono molte: invece di allungare la pagina, la tabella sta in un
   riquadro di altezza data e le righe oltre quella si raggiungono scorrendo lì dentro.

   L'ALTEZZA NON È QUI: la decide la pagina con `max-height` sul riquadro, perché dipende da
   cosa contiene — dieci condomìni non sono l'anteprima di un foglio di calcolo. Il componente
   dà il comportamento, non la misura.

   Due dettagli che sembrano capricci e non lo sono, imparati riscrivendo tre volte la stessa
   soluzione in tre punti del sito:

   - `border-collapse: separate`. Con `collapse` i bordi appartengono alla tabella, non alle
     celle: quello sotto l'intestazione scorre via insieme alle righe e l'intestazione resta
     senza linea. Il bordo va quindi disegnato con `box-shadow`, che è un'ombra dell'elemento
     e resta ancorata a lui.
   - `z-index` sull'intestazione. Senza, le righe le passano SOPRA mentre scorrono, e il
     testo si sovrappone. */

.tabella-scroll {
  overflow: auto;
  border: 1px solid #e4e7eb;
  border-radius: 10px;
}

/* `border-spacing: 0` perché `separate`, di suo, stacca le celle di 2px. */
.tabella-scroll table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tabella-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;                    /* opaco: le righe ci scorrono sotto */
  box-shadow: inset 0 -1px 0 #e4e7eb;     /* la linea sotto l'intestazione, che non scorre via */
  border-bottom: none;
}

/* Con `separate` le righe non hanno più il bordo condiviso: lo si rimette sulle celle, e si
   toglie all'ultima riga perché non raddoppi con quello del riquadro. */
.tabella-scroll tbody td { border-bottom: 1px solid #eef1f4; }
.tabella-scroll tbody tr:last-child td { border-bottom: none; }