Inserire la scrollbar in una tabella

DarkWolf

Posted on 22/7/2011, 12:18

User deleted

Questa guida è rivolta a chi ha problemi a inserire la barra di scorrimento verticale nella tabella generata in:
Amministrazione > gestione codice HTML > Generatore di tabelle con grafica uguale a quella del forum.
Pertanto, chi non volesse scrollbar, è pregato di andare lì.

Per la corretta comprensione di queste istruzioni, è necessario conoscere almeno in parte le basi descritte in questo topic:
http://skinlab.forumfree.net/?t=3642555

Inserite il codice della tabella che vi interessa in Amministrazione > gestione codice HTML >in fondo al forum, nella homepage del forum, in cima al forum, insomma dove preferite.

Ottenere Tabella 1 riga 1 colonna con scrollbar
ANTEPRIMA

CODICE

<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"><td class="mback_center"> <div class="mtitle">TITOLO</div> <td class="mback_right"></table><td class="mright_top"><tr><td class="mleft"><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1"> <tr title="RIGA1"> <td class="ww"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> </table><td class="mright"><tr><td class="mleft_bottom"><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"><td class="msub_center"> <td class="msub_right"></table><td class="mright_bottom"></table><p>

ù

Ottenere Tabella 1 riga 2 colonne con scrollbar
ANTEPRIMA

CODICE

<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"><td class="mback_center"> <div class="mtitle">TITOLO</div> <td class="mback_right"></table><td class="mright_top"><tr><td class="mleft"><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1"> <tr title="RIGA1"> <td class="ww"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> <td class="aa"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> </table><td class="mright"><tr><td class="mleft_bottom"><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"><td class="msub_center"> <td class="msub_right"></table><td class="mright_bottom"></table><p>

Ottenere Tabella 2 righe 1 colonna con scrollbar
ANTEPRIMA

CODICE

<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"><td class="mback_center"> <div class="mtitle">TITOLO</div> <td class="mback_right"></table><td class="mright_top"><tr><td class="mleft"><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1"> <tr title="RIGA1"> <td class="ww"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> <tr title="RIGA2"> <td class="ww"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> </table><td class="mright"><tr><td class="mleft_bottom"><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"><td class="msub_center"> <td class="msub_right"></table><td class="mright_bottom"></table><p>

Ottenere Tabella 2 righe 2 colonne con scrollbar
ANTEPRIMA

CODICE

<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"><td class="mback_center"> <div class="mtitle">TITOLO</div> <td class="mback_right"></table><td class="mright_top"><tr><td class="mleft"><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1"> <tr title="RIGA1"> <td class="ww"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> <td class="aa"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> <tr title="RIGA2"> <td class="ww"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> <td class="aa"><div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div> </table><td class="mright"><tr><td class="mleft_bottom"><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"><td class="msub_center"> <td class="msub_right"></table><td class="mright_bottom"></table><p>

Ricordate sempre di dover modificare questa parte se volete modificare le scritte:

CODICE

<div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div>

Per inserire un testo a capo è sufficiente inserirlo dopo il:

CODICE

<br>

successivo al testo.

Per modificare lo sfondo, è opportuno dire che i codici sopra riportati sono collegati agli stili del forum presenti in amministrazione > modifica stili e colori.
Le righe interessate (in particolar modo i valori dei background-color di .ww e .aa) sono queste:

CODICE

.ww, .xx, .yy, .zz, .board .aa {background-color: #D8E3C4}
.aa, .bb, .cc, .board .zz {background-color: #D1E0BA}

Se volete evitare questa dipendenza tra stili della tabella e del forum, è sufficiente aggiungere nuove classi con lo stesso contenuto delle precedenti parentesi graffe, e aggiornare il codice che avete scelto.

Infine potete personalizzare i colori dello scrollbar seguendo le istruzioni della seguente guida:
http://skinlab.forumfree.net/?t=429073
Il metodo è compatibile con internet explorer, gli altri browser non lo supportano.

0 replies since 22/7/2011, 12:18 1061 views