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!
Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: Tabella scrollabili orizzontalmente con i CSS scritto da Merlinox.
css a manetta
@k76: danno tante soddisfazioni