Questo tutorial spiega come bloccare la prima riga e prima colonna durante lo scorll usando Javascript e CSS

Stavo lavorando su una tabella che riporta i permessi di una serie di utenti, la prima riga riporta il tipo di permesso (una ventina circa), la prima colonna il nome degli utenti coinvolti. Ho notato che quando scrollavo la tabella a destra non riuscivo piu’ a vedere a che nome si riferiva la colonna che vedevo, e scollando in basso perdevo la visione dei permessi.

Ho avuto la necessita’ di creare una tabella con la prima riga e la prima colonna bloccata, in modo da vedere sempre il nome degli utenti e i nome dei permessi.

Bloccare la prima riga o header in CSS.

La prima cosa da fare e’ bloccare la prima riga, per farlo e’ necessario essere sicuri di aver usato i tags  <thead> e <tbody> all’interno del HTML per separare la testa l’intestazione della tabella con i valori della tabella stessa. In questo modo possiamo creare una scroll di tutti i dati bloccando l’intestazione. Ecco un esempio:

In questo caso basta bloccare l’altezza di <tbody> in CSS invece di quella di <table> in oltre dobbiamo modificare il CSS di  <tbody> per visualizzare il corpo della tabella in blocco con <display: block>. La proprieta’ < overflow: auto > ci serve a visualizzare la scrollbar.  Sfortunatamente con questa scelta perdiamo la possibilita’ di creare una tabella responsive e adattabile a ogni tipo di schermo. Il problema di questa soluzione e’ che creeremo un grosso spazio tra la tabella e il resto della finestra del browser. In questo caso dobbiamo essere sicuri che la grandezza di ogni cella sara’ esattamente la stessa, altrimenti la tabella sfasera’ l’intestazione con i valori della tabella stessa.
Ecco il CSS di questa soluzione:

 

Bloccare la prima riga in JQuery.

Adesso che abbiamo capito come bloccare una parte della tabella e creare lo scrolling dobbioamo cercare di bloccare dinamicamente ogni parte della tabella, o meglio ogni parte che ci interessa bloccare. Sfortunatamente questo approccio in CSS puo’ essere applicato o a sole righe o a sole colonne, non ad entrambe allo stesso tempo.

Quello che voglio fare e’ “imbrogliare” il CSS e creare una funzione in JQuery che simula il blocco della colonna e crea lo scrolling. Per fare questo usero’ le funzioni scrollTopscrollLeft che restituiscono i numeri di pixel dello scroll. Per maggiori informationi guarda la ducumentazione su questa pagina.

Diamo prima un ID alla mia tabella per identificarla quando usero’ JQuery, per esempio <table id="fixed-headers">. Poi devo assocciare la tabella all’effetto scroll del Javascript in modo da eseguire le sucessive funzioni solo in caso di scroll. Ora creo una funzione che trasporta l’intestazione in alto in funzione dei numero di pixel secondo l’asse Y (dobbiamo  spostare l’header in alto e in basso sostanzialmente).

Ora creo una funzione che trasporta la prima colonna della tabella in funzione dei numero di pixel dello scroll secondo l’asse X, sposto quindi la prima colonna a destra e a sinistra.

Ora assemblo tutto. Ecco il CSS della tabella:

Ed ecco il mio codice JQuery:

Ecco il risultato finale:

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
1st
2nd
3rd
4th
5th
6th
7th
8th
9th
10th
11th
12th
13th
14th
15th
16th
17th
18th
19th
20th
21st
22nd
23rd
24th
25th
26th
27th
28th
29th
30th
31st