Home > Web Mania > Tabella scrollabili orizzontalmente con i CSS

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.

Categorie: Web Mania Tag:
  1. June 21st, 2007 at 11:48 | #1

    css a manetta

  2. June 21st, 2007 at 12:00 | #2

    @k76: danno tante soddisfazioni :)

  1. Ancora nessun trackback.

Additional comments powered by BackType