Tabellerna med scrollen du nu ser är helt stylade med css utan “fulhtml” och koden validerar strict. Nedre tabellen har beskrivningen.

Inte alla vet att man kan få scroll-lister i tabeller. För de som inte vill använda frames eller iframe och har mycket text är detta ett bra alternativ.
Det du nu tittar på är två exempel på tabeller med scrollfunktion.
Vi ska nu kika på hur man kan formatera en tabell med css för att få den att scrolla. Är du kunnig inom css och tabellstrukturer ser du genast att du kan laborera lite mer ;)

Det går också alldeles utmärkt att länka från tabellen, dock inte tillbaka till någon annan tabell om du inte använder iframe som target.

Exempel: Välkommen till kaxig

OK, då kör vi igång.
Kopiera gärna koden direkt härifrån ;)

Börja med att öppna upp ditt html-dokument och lägg in koden i <head> på den/de sidor du vill ha tabellerna.

< !– Scroller i tabell –>
<style type=”text/css”>
<!–

#scroll { width: 450px; height: 182px; overflow: scroll; overflow-x: hidden; }
#scroll2 { width: 450px; height: 182px; overflow: scroll; overflow-x: hidden; }
#scroll3 { width: 100%; height: 182px; overflow: scroll; overflow-x: hidden; }
.kant{border: 1px solid #000;}
.td{width:450; height:182; background:#E0E0E0; padding:5px;}
–>
</style>
</head>

OBS! Vill du att din css ska validera om du använder doctype transitional och inte strict bör du ta bort följande i din css: overflow-x: hidden;.

Det vi nu ser är att vi har samma width = 450 pixlar och samma height = 182 pixlar på dessa två tabeller. Här kan du ändra storleken så den passar din sida.

Men det står ju #scroll3? Var är den tabellen? Det är den tabell som håller ihop tabellerna. Där ser du att det också står height = 182 pixlar men width är satt till 100%. Ska du ändra här, om du vill ha andra värden i height, så ska det vara samma värde som i alla tabellers height. I detta fall 182 pixlar.

Fler tabeller med scroll?
Enkelt, du bygger då bara på koden: #scroll2 { width: 533px; height: 182px; overflow: scroll; overflow-x: hidden; } i < head >. Var uppmärksam på att står det scroll2 - för den har du redan utan nu vill du ha en tredje tabell, då ändrar du bara scroll2 till scroll3.
Ändra sedan div-id attributet i de resterande koderna som finns direkt i html-koden.

Nu tar vi klivet ner i < body > och börjar att bygga tabellerna.

<body>
<table class=”kant” summary=”scrolltabell”> <tr> <td class=”td”>
<div id=’scroll’ > Här skriver du din text i tabell 1 < /div > < /td > < / tr> < /table > <table class=”kant” summary=”scrolltabell”> <tr> <td class=”td”>
< div id=’scroll2 ‘> Här skriver du lite mer text i tabell 2< /div > < /td > < /tr > < /table >

Som du ser så är det inga konstigheter förutom tillägget < div id=’scroll’ >
Denna kod kallar på respektive tabell. Här är det scroll = tabell 1. I nästa tabell är det scroll2 = tabell 2. Det är detta div-attribut som du måste ändra siffra på om du vill ha fler tabeller.

Vi avslutar våra tabellerna som vi brukar, fast med tillägget < / div > .

Kika lite på koden så ser du strax “mönstret” i upplägget av den.
Skriv ut!
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 2 out of 5)
Loading ... Loading ...