INDICE

INSERIRE LE BARRE DI SCORRIMENTO IN UNA TABELLA

A volte si desidera di avere una tabella che occupi solo una parte fissa della pagina nonostante che il suo contenuto sia variabile (dinamico) oppure occupi uno spazio maggiore delle dimensioni che vogliamo assegnarle.

Basterà allora inserire la tabella in un div di dimensioni prestabilite e permettere l'aggiunta di barre di scorrimento laterali.

BARRA DI SCORRIMENTO VERTICALE

Esempio

Spiegazioni

Questo è un esempio di tabella con barra di scorrimento verticale.

Abbiamo scritto una lista di nomi:

Andrea
Bruno
Carlo
Emilio
Federico
Gioia
Irene
....
Tommaso

 Il codice per la tabella è stato inserito fra i seguenti tag:

<div style="width:200px;height:100px;overflow-y: scroll; border:1px solid black;">
...
...
</div>

width:200px;
Rappresenta la larghezza da attribuire al div
height:100px;
Rappresenta l'altezza da attribuire al div
overflow-y: scroll;
Indica che, se il contenuto supera l'altezza stabilita, deve essere inserita la barra di scorrimento verticale
border:1px solid black;
Indica spessore, tipo e colore del bordo.
Attenzione! Per il buon funzionamento del codice la tabella deve essere inserita con la stessa ampiezza del div.
Esempio di codice: <table width="100%" border=0>

BARRA DI SCORRIMENTO ORIZZONTALE

Esempio

Spiegazioni

Nome Cognome Professione Sede Disponibilità
Anna Rossi Infermiera Torino Sì
Giovanni Marini Assistente sociale Torino Sì
Laura Bianchi Medico Cuneo Sì
Le uniche differenze rispetto all'esempio precedente sono che:
  1. La tabella ha un'ampiezza maggiore del div (noi abbiamo inserito il 120%)
  2. E' stato inserito overflow-x: scroll; nel tag div
Attenzione! FireFox inserisce automaticamente, se necessario, anche la barra di scorrimento verticale.

ENTRAMBE LE BARRE

Esempio

Codice da copiare per fare una prova

Nome Cognome Professione Sede Disponibilità
Anna Rossi Infermiera Torino Sì
Giovanni Marini Assistente sociale Torino Sì
Laura Bianchi Medico Cuneo Sì
Ludovico Armeni Dietologo Torino Sì

INDIETRO

©2006 www.webfract.it