Tabella scrollabili orizzontalmente con i CSS

Un breve tutorial per creare delle tabelle facilmente navigabili, stile excel, mantenendo alcune colonne fisse.
Facciamo subito vedere il risultato finale prima che qualcuno si lamenti.

 

ID NICKNAME
001 k76
002 merlinox
003 gidibao
004 mavero
datoA datoB datoC datoD datoE datoF datoG datoH datoI datoL
000 001 002 003 004 005 006 007 008 009
010 011 012 013 014 015 016 017 018 019
020 021 022 023 024 025 026 027 028 029
030 031 032 033 034 035 036 037 038 039


 

Il funzionamento è basato su due distinte tabelle: quella base (id, nickname) e quella con tutti i dati da far scrollare orizzontalmente.
Entrambe le tabelle sono inserite in due rispettivi DIV flottanti a sinistra (float:left) in modo da farle allineare.

La tabella dati (datoA, datoB, …) ha la dimensione della larghezza impostata via CSS e l’overflow in automatico (width: 200px;overflow:auto).

 

Il gioco è praticamente fatto!

E se voglio farlo verticale

Come suggerisce Othello la stessa cosa può essere fatta anche verticalmente. Basterà impostare un’altezza fissa (height) e un po’ di padding laterale a destra (padding-right) nel DIV con settato OVERFLOW come auto. Chiaramente invece di tenere le tabelle allineate (con i due float) si metteranno una sotto l’altra.
Bravo Othello, grazie. Peccato che non hai ancora partecipato al banner!

Loading Facebook Comments ...

2 pensieri su “Tabella scrollabili orizzontalmente con i CSS

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *