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!
Approfondimenti online
La tecnologia informatica ha fatto passi da gigante. In modo particolare Google, che con il suo analizzatore di testo, è in grado di proporre collegamenti contestuali a quanto hai appena letto. Questi i link pubblicitari proposti da Adsense.
css a manetta
@k76: danno tante soddisfazioni