Tabellen Body Scrollen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
bereich
blocken
browser
code
display
echte tabelle
funktionieren
header
hilfestellung
http
idee
internet
regeln
rest
spalten
tabelle
url
weben
zelle
-
Ich wollte wissen ob es eine Möglichkeit gibt nur einen Teil einer Tabelle zu scrollen zu bringen.
Am besten den tbody Bereich.
Ich habe hier diese Tabelle:
http://mprev.lima-city.de/sample3.html
Dabei will ich ab einer bestimmten Länge (zB.: 200px) von tbody,
dass dieser Bereich einen Scroll-Bar bekommt.
Habe es da schon mit paar Varianten von overflow versucht.
Aber ich denke so klappt es nicht.
Kriegt man das irgendwie hin?
Ich bräuchte das so, das eben Header & Footer die Spalten die Gleiche Breite haben wie der Body und "immer" zu sehen sind.
Geht das irgendwie? Hat da wer eine Lösung?
<table border="1" style="border" > <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <tfoot> <tr> <td>foot 1</td> <td>foot 2</td> <td>foot 3</td> </tr> </tfoot> <tbody> <tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr><tr> <td>Koerper1</td> <td>Koerper2</td> <td>Koerper3</td> </tr> </tbody> </table>
Hier: http://www.web-toolbox.net/webtoolbox/tabellen/tabellen-scroll.htm
Gibt es zwar Scrollende Tabellen, diese umfassen aber auch Header und footer.
Diese sollen dabei aber stehen bleiben. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
In etwa so? http://deswp.lima-city.de/examples/scroll.html
Nachteil an dem Beispiel ist, dass die Zellen eine definierte Breite brauchen, da die Tabelle wegen display: block nicht mehr wie eine gewöhnliche Tabelle reagiert.
- thead, tbody und tfoot sind display: block
- Header und Footer sind absolut innerhalb des divs positioniert
- tbody besitzt eine Höhe, overflow-y: auto und ist etwas breiter als sein Inhalt (für den Scrollbalken)
- Zellen haben eine feste Breite (100px im Beispiel)
Funktioniert übrigens nicht im Internet Explorer.
Beitrag zuletzt geändert: 10.1.2013 13:50:11 von deswp -
muss es denn unbedingt eine echte Tabelle sein?
ich denke mit div´s wärst Du da besser dran, da kannst Du dann auch vernünftig mit den CSS scroll Regeln spielen ;) -
Mögliche Ansätze:
pure CSS: http://www.imaputz.com/cssStuff/bigFourVersion.html
jquery: http://www.farinspace.com/jquery-scrollable-table-plugin/
Edith: Weitere Ideen finden sich in diesem Thread bei Stackoverflow
Beitrag zuletzt geändert: 10.1.2013 1:39:11 von fatfreddy -
css2.1 hat das scrollen zwar auch in den Tabellen vorgesehen, nur die meisten Browser unterstützen dies noch nicht.
Wenn du die breite der Tabellen-Spalten schon kennst und dir ie Benützer egal sind:-)
<style style=text/css> table>*{width:310px;display: block;} tbody { height: 200px; overflow: auto;} table>*>*>*{width:90px;} </style>
Sollte alles dynamisch sein findest du im web komplizierte Lösungen
Liebe grüsse Dregi
Beitrag zuletzt geändert: 10.1.2013 4:17:18 von dregi -
deswp schrieb:
Funktioniert übrigens nicht im Internet Explorer.
Aussehen tuts zwar sonst nett. Aber soll auch im IE funktionieren (also 8/9 +)
coopfungamers schrieb:
muss es denn unbedingt eine echte Tabelle sein?
ich denke mit div´s wärst Du da besser dran, da kannst Du dann auch vernünftig mit den CSS scroll Regeln spielen ;)
Jop sind Daten für und aus Tabellen, die auch semantisch in Tabellen gehören.
Außerdem würde es wenn es wie von mir erhofft funktionieren würde auch das einfachste
fatfreddy schrieb:
Mögliche Ansätze:
pure CSS: http://www.imaputz.com/cssStuff/bigFourVersion.html
jquery: http://www.farinspace.com/jquery-scrollable-table-plugin/
Edith: Weitere Ideen finden sich in diesem Thread bei Stackoverflow
Das CSS wieder mal ohne IE ... jQuery scheint zu gehen.
Schade das man für so was simples nicht ohne aus geht.
-
hm....
habe dies mal im ie9 und chrome getestet.
funktioniert bei diesen 2. Bei ie7 funktioniert es nicht.
bei anderen Browser(ie8) weis ich nicht wie es ausschaut.
Falls jemand was anderes hat kann er ja ne Rückmeldung machen.
<!DOCTYPE html> <head > <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> * { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;border-collapse:collapse; } table * {width:300px;display:block;} tbody {position:absolute; overflow-Y: scroll; overflow-X:hidden;height: 200px;} tfoot {position:absolute;margin-top:200px;} /* tfoot->margin-top=tbody->height */ table>*>*>*{display:inline-block;width:93px;} /* bei 4 spalten 24%,.... */ table>*>*:nth-child(2n-1){background:#aaa;} table>*>*>*{border:1px solid black;} </style> </head>
-edit-
hier einen Link zu dem Beispiel:
http://dregi.lima-city.de/hilfestellungen/scrolltable.html
-------
mfg Dregi
Beitrag zuletzt geändert: 11.1.2013 4:09:32 von dregi -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
