Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.010 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Table scroll

..:: Table scroll ::..

Vediamo come inserire uno scroll, barra di scorrimento laterale, in una table,
in realtà sarà un box div che ci permetterà di avere questo "accessorio" aggiungendo
i parametri necessari per visualizzare uno scroll classico o colorato

* Questo è il codice base

<div style="width:***px; height:***px; overflow-y: scroll;">...</div>

Si visualizzerà un box invisibile con la barra laterale scorrevole

testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo... testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo...


I parametri per la larghezza (width:***px;) e l'altezza (height:***px;) sono indispensabili perché determinano i confini del contenuto nel box

overflow-y: scroll; è il parametro necessario per aggiungere al box lo scroll,
con l'attributo "y" indichiamo che la barra di scorrimento deve essere in verticale rispetto
al contenitore

* Lo scroll sarà visibile quando si supererà con il contenuto la misura dell'altezza stabilita.

- Attenzione alla misura stabilita per la larghezza, se il contenuto è superiore si visualizzerà automaticamente anche un'antiestetica barra di scorrimento orizzontale,
sul fondo del box.

* Esempio pratico in questo box la larghezza è impostata a 500 pixel e all'interno c'è un'immagine che ne misura 556

testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo... testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo...

Vediamo quindi, come inserire lo scroll nella table
il codice del div deve essere aggiunto all'interno di una cella, i parametri per lo stile
del testo si possono inserire nella table, nella cella o direttamente nel div

<table style="border:3px solid #a5c3a1; text-align:center; margin-left:auto; margin-right:auto" bgcolor="#e2eae0" cellpadding="4" cellspacing="4" width="400">
<tr>
<td><div style="width:400px;height:120px; overflow-y: scroll;">
Contenuto scroll </div></td>
</tr>
</table>

Ecco una table con scroll

testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo...

Aggiungere lo scroll in una table ci da la possibilità di scrivere o inserire immagini in uno
spazio delimitato ma accessibile velocemente e realizzare dei box con più accessori, per esempio,
menu completi di data e ora e/o box news con il calendario e una frase al giorno, ecc. ecc.

 ..:: Piccolo esempio box news ::..
Penelope ♥
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo...




Scroll colorato

Se vi piacciono gli scroll colorati come nei box del telaio, che vedete se navigate
con Crome, Opera, Edge o Safari, allora vi servirà una classe css, ::-webkit-scrollbar
con la quale è possibile personalizzare i colori e l'aspetto della barra di una pagina e/o dei div,
purtroppo però, non funziona con tutti i browser per cui, regolatevi.

- Per avere un codice più ordinato e pulito, scriveremo una classe per il div (box/contenitore)
con il classico class="..." utilizzabile quindi anche per altri div o table, invece per i parametri
::-webkit-scrollbar scriveremo la classe in un identificatore unico, tramite l'attributo id="..."
quindi, per personalizzare lo scroll di più box/contenitore occorrerà scrivere più classi,
ognuna con il suo identificatore id specifico, #style-2, #style-3, ecc. ecc.

<style type="text/css">
.scroll_box{
overflow-y: scroll;
width: ***px;
height: ***px;
text-align: left;
font-family: 'Verdana';
font-size: 12px;
color : #000000;
margin-left:auto;
margin-right:auto
}
#style-1::-webkit-scrollbar-track{
background-color: #xxxxxx;
border-radius: 10px;
}
#style-1::-webkit-scrollbar{
width: 7px;
background-color: #xxxxxx;
border-radius:10px;
}
#style-1::-webkit-scrollbar-thumb{
background-color: #xxxxxx;
border-radius: 10px;
}
</style>

.scroll_box{... classe per il div, ovvero tutti i parametri che ci occorrono per
il box/contenitore, quindi lo scroll "overflow-y: scroll;"

le misure in larghezza e altezza, "width: ***px; height: ***px;"
espresse in pixel o in percentuale

i parametri per il testo (posizione/font/misura/colore)

e le immancabili indicazioni per la posizione nella pagina
"margin-left:auto; margin-right:auto"

Classe per lo scroll

#style-1::-webkit-scrollbar-track{
parametri per colorare lo spazio sotto la barra di scorrimento
border-radius: 10px; arrotonda gli angoli

#style-1::-webkit-scrollbar{ parametri per lo spazio di scorrimento,
la misura in larghezza width: 7px; espressa in pixel, il colore e gli angoli arrotondati

#style-1::-webkit-scrollbar-thumb{ parametri per lo barra di scorrimento,
colore e angoli arrotondati

N.B.: Ci sono altri parametri per personalizzare maggiormente gli scroll,
se volete provare vi basta cercare in rete ::-webkit-scrollbar
Una guida molto dettagliata la trovate qui -> css-tricks.com

Se volete vedere cosa colorano i parametri descritti,
cliccate qui -> Esempio ::-webkit-scrollbar

Nella cella della table in cui abbiamo previsto lo scroll scriveremo questo codice
<div class="scroll_box" id="style-1">...</div>

Ed ecco il piccolo box news con lo scroll colorato



Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^

💻 ✨ Apprezzato
80%
Voti totali: 4
Rating... 4




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^









~ Pagina visitata da 2544 utenti





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥


Basi e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

elise ~ 02/11/2026 19:08:37
Buona sera carissima,indovina .... ti ho preso uno stupendo Natale Countdown,Spero non ti dispiaccia.Grazie ancora , un abbraccione
ૡScritto in Natale countdown perpetuo...
Elise ~ 29/10/2026 19:01:19
Buona sera tesorino bello, ho preso un bellissimo decoro di Natale, adoro il Natale con tutte le luci , l'albero che non vedo l'ora di fare, allora comincio ad abbellire il mio blog con le tue bellissime creazioni.Grazie ancora e dolcissima serata.un abbraccione
ૡScritto in Decori pagine Natale
Veronica ~ 29/10/2026 10:39:54
Ciao ho preso dei tuoi adottini x il mio spazio
ૡScritto in Adottini menu
elise ~ 09/10/2026 16:38:03
Ciao carissima Penelope, ho preso il tuo bellissimo quadrotto fatato. Sempre bellissimo il tuo sito, pieno di creazioni stupende.BRAVISSIMA!!!!!Grazie, un abbraccione e buona serataElise
ૡScritto in Quadrotti fate
ૡPenelope ♥ ~ 22/09/2026 20:36:49
Grazie a te carissima Marina
ૡScritto in Calendario magico box small
marina ~ 20/09/2026 20:04:19
Grazie infinite per il bellissimo calendario.
ૡScritto in Calendario magico box small
ૡPenelope ♥ ~ 14/09/2026 22:32:30
Cara Filo d'arianna un po' di anni fa ho realizzato qualche grafica per ForumFree ed era un delirio non so se è ancora così ma la grafica si componeva con decine di piccole immagini, davvero tanto lavoro nemmeno gratificante purtroppo, per quanto riguarda i tutorial, sono una maniaca di html, php e js ma sulla gestione di un forum non saprei da dove partire Un abbraccio forte
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 14/09/2026 18:34:20
Carissima Filo d'arianna grazie alla tua segnalazione ho risolto un problema nel commentario purtroppo per evitare spam e messaggi sgradevoli avevo impostato un eccesso nei controlli, ripristinato, ora si può commentare e mettere url del proprio spazio senza problemi grazie infinite cara un abbraccio forte forte
ૡScritto in Home
filod'arianna ~ 14/09/2026 07:41:37
Ciao Penelope! Ho preso il Settimanello micioso:-DL'ho inserito all'interno della sezione "Appunti" sul mio forum, però ho visto che non si può più linkare qui nei messaggi, non riesco a farti vedere dove l'ho inserito. Ad ogni modo il forum è Librandosi tra le pagine, su forumfree. Un abbraccio a presto!
ૡScritto in Home
filod'arianna ~ 12/09/2026 06:52:57
Hai mai pensato di buttarti nel creare grafica e tutorial per ForumFree? 😂 Sto scherzando, ma solo a metà! Sarebbe fantastico. Ne approfitterei immediatamente
ૡScritto in Blogger Kit Autunno