Tabelle mit Scrollbars
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
balken
beispiel
code
display
farbe
fixieren
haupt
helfen
http
oberste zeile
obersten zeile
position
rot markierte bereich
rote spalte
spalte
tabelle
unteren rand
url
zeile
-
Hallo zusammen,
Ich habe eine Tabelle, die sowohl von oben nach unten und von links nach rechts scrollbar sein soll. Um euch das besser zeigen zu können habe ich eine Beispiel Tabelle gemacht und sie hochgeladen:
http://moritz-m.bplaced.de/test2.php
Ich habe die Tabelle in ein Div gepackt, welches kleiner als die Tabelle ist. Dann habe ich
overflow-y: scroll;
in den Style des Divs geschrieben. Jetzt sind zwei Scrollbars vorhanden. Allerdings möchte ich das so haben, dass der Rot markierte Bereich nicht mit gescrollt wird. Das heißt wenn man den unteren Balken nach rechts zieht soll der rote Bereich stehen bleiben und der Rest soll sich nach rechts bewegen. Und die Scrollbar soll auch erst nach dem roten Bereich anfangen. Genauso soll das mit der obersten Zeile sein. Also die Zeile mit den Zahlen soll sich auch beim scrollen nach unten nicht bewegen. Ich bekomme das leider nicht gelöst.
Außerdem würde ich noch gerne wissen, wie man die Scrollbars editiert, also die Farben usw ändert. Ich habe bereits folgendes gefunden:
scrollbar-arrow-color: #00008B; scrollbar-base-color: #00008B; scrollbar-track-color: #C0C0C0; scrollbar-face-color: #800000; scrollbar-highlight-color: #0000FF; scrollbar-3dlight-color: #800080; scrollbar-darkshadow-color: #EE82EE; scrollbar-shadow-color: #FFF;
Allerdings funktioniert das bei mir unter der neusten Google Chrome Version nicht. Gibt es da noch andere Möglichkeiten?
Ich würde mich freuen, wenn mir jemand helfen kann.
Viele Grüße
Beitrag zuletzt geändert: 3.2.2014 22:53:05 von ultimate-bravery -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
in den Style des Divs geschrieben. Jetzt sind zwei Scrollbars vorhanden. Allerdings möchte ich das so haben, dass der Rot markierte Bereich nicht mit gescrollt wird.
Eine Spalte, wie von Excel gewohnt, zu fixieren, ist mit reinem CSS vermutlich nicht umzusetzen. Wenn überhaupt, braucht es dafür wohl zwei Divs und Javascript. Das wäre der Ansatz, über den ich bei dieser Aufgabenstellung nachdenken würde. Ad Hoc habe ich aber auch keinen Code parat, der das leistet.
Außerdem würde ich noch gerne wissen, wie man die Scrollbars editiert, also die Farben usw ändert. Ich habe bereits folgendes gefunden:
Gickst Du z.B. hier: http://codemug.com/html/custom-scrollbars-using-css/
....
Allerdings funktioniert das bei mir unter der neusten Google Chrome Version nicht. Gibt es da noch andere Möglichkeiten? -
Fixieren kann man doch, indem man position:fixed verwendet. Ich hab beim Threadersteller nirgendwo gelesen, daß es dynamisch fixiert werden soll?
Also müßte man die rote Spalte - wie fatfreddy sagt - in ein eigenes div oä packen und das dann kalt fixieren. Der Rest bleibt in seinem div und bleibt scrollbar. über index-z kann man dann auch schön das eine über das andere legen.
Wenn man es dynamischen machen will kann man ja immernoch über Checkboxen uä javascrptfreie Wege auftun
-
Danke für die Antworten.
Ich habe die rote Spalte als eigene Tabelle in ein Div gepackt und die position auf fixed gestellt. Jetzt guckt die Spalte unten aus dem Div raus, da sie ja größer als das Div ist und normalerweise ja auch nach unten scrollbar sein soll. Nur halt nicht zur Seite. Habt ihr weitere Ideen? -
ultimate-bravery schrieb:
Ja! Manchmal ist Herr Snook doch zu was brauchbar.
Habt ihr weitere Ideen?
Er hat den richtigen Denkantoß gegeben.
Es geht auch ohne Javascript. Der Trick ist ein dritter Div!
<div style="overflow:auto; height: gewünschte Darstellungshöhe;"> <div style="float:left;"> <table> <tr>td>erste, fixierte Spalte</td></tr> //... weitere Zeilen </table> <div style="overflow:auto;"> <table> <tr><td>zweite Spalte</td><td>dritte Spalte</td><td>n. Spalte</td></tr> //... weitere Zeilen </table> </div> </div>
So geht es auch mit purem CSS. (Code nicht getestet, sollte aber so funktiuonieren)
Im umfassenden Container sorgt das "overflow:auto" für die Funktionalität des vertikalen Scrollens in der Tabelle. Beim 2. inneren Div wird mit "overflow:auto" horizontal durch die Inhaltsspalten gescrollt,,ohne die Indexspalte aus dem Sichtbereich zu schieben.
Beitrag zuletzt geändert: 4.2.2014 0:14:15 von fatfreddy -
Mhh nee klappt nicht. Ist eigentlich genauso wie vorher und ich krieg die Tabelle mit den restlichen Spalten nicht neben die erste Spalte. Habs nochmal neu hochgeladen:
http://moritz-m.bplaced.de/test2.php
EDIT:
Klappt doch, habe vergessen ein Div zu schließen.
Und jetzt soll es am besten noch so sein, dass die untere Scrollbar am unteren Rand des Haupt Divs ist, und nicht ganz unten. Und wenn es geht soll auch noch die oberste Zeile fixiert sein.
Beitrag zuletzt geändert: 4.2.2014 0:32:20 von ultimate-bravery -
ultimate-bravery schrieb:
Und jetzt soll es am besten noch so sein, dass die untere Scrollbar am unteren Rand des Haupt Divs ist, und nicht ganz unten
Hmmm, das wird schwierig. der Scrollbar gehört halt ursächlich zu dem Div, der das Scrollen erfordert und findet sich dort immer ganz unten wider.
[quote. Und wenn es geht soll auch noch die oberste Zeile fixiert sein.[/quote]
Das sollte mit geschickter Schachtelung von Divs, nach obigem Muster, und geschickt gesetzten Floats auch machbar sein, könnte aber schon etwas schwieriger werden. Bastel einfach mal ein wenig mit Schachtelungen rum.
.
Beitrag zuletzt geändert: 4.2.2014 0:42:09 von fatfreddy -
Ok ich probiere mal ein bisschen.
Hmmm, das wird schwierig. der Scrollbar gehört halt ursächlich zu dem Div, der das Scrollen erfordert und findet sich dort immer ganz unten wider.
Ja stimmt schon aber geht es nicht trotzdem irgendwie? Kann man irgendwie die Position der Scrollbar verändern? Denn so erfüllt es ja nicht wirklich den Zweck. Man scrollt nach unten, dann kommt die horizontale Scrollbar und wenn man nach rechts scrollen will kann man sich nicht mehr an der obersten Zeile orientieren. Dann muss man erst wieder hoch und gucken in welcher Spalte zum Beispiel die 8 steht^^
EDIT:
Ich habe jetzt zwei weitere Divs gemacht, um eine Scrollbar an meiner gewünschten Stelle zu haben:
<div style="height:15px; width:700px; background:#00CC00; position:fixed; top:494px; left:83px; overflow:auto; "> <div style="width:1000px; height:1px;"> </div> </div>
Ich habe gelesen, dass man jetzt die zwei Scrollbars synchronisieren kann. Also wenn ich nun den Balken bewege, der zu sehen ist, dann bewegt sich auch der, der ganz unten ist. Allerdings habe ich noch nichts passendes gefunden, um das zu realisieren. Man muss ja auch beachten, dass man den Balken aus dem neuen Div mit dem horizontalen Balken aus dem ersten Div synchronisiert und nicht mit dem Vertikalen. Wäre es sinnvoll dafür ein neues Thema im Javascript Forum aufzumachen? Ich hoffe ihr könnt mir helfen.
Hier nochmal das Beispiel: http://moritz-m.bplaced.de/test2.php
Beitrag zuletzt geändert: 4.2.2014 2:03:21 von ultimate-bravery -
"Irgendwie" geht das sicher. Irgendwann ist aber CSS mit seinen Möglichkeiten am Ende und man muß weiter schauen. Ich bin mir relativ sicher, mal eine Lösung gesehen zu haben, die auf jquery basierte.. Befrage mal Google z.B. nach "jquery +table +scroll"oder "jquery +table +grid". Das könnte dir weiterhelfen. Da es nicht mein Problem ist, bin ich zu faul, mich jetzt durch die Ergebnisse zu klicken..
Beitrag zuletzt geändert: 4.2.2014 2:19:48 von fatfreddy -
fatfreddy schrieb:
"Irgendwie" geht das sicher.
Die Befragung einer Suchmaschine teilt mit:
http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body
Das ist rein CSS, ohne JavaScript, so wie ich das sehe.
Sieht dann so aus wie hier rechts dargestellt
Edit: offenbar geht das auch mit fixierter Zeile und Spalte:
http://stackoverflow.com/questions/15811653/table-with-fixed-header-and-column-on-pure-css
Live Demo
Beitrag zuletzt geändert: 4.2.2014 7:47:59 von burgi -
Hey! Da du doch so viel mit div-tags arbeitest, nutze doch eine div-tabelle!
<div class="tabelle" style="display:table;max-eight:×px;max-width:×px;overflow-y:scroll;overflow-x:hidden;border-collapse:separate;border-spacing:×px ×px ×px ×px;"> <div><div>foo</div><div>bar</div></div> <div><div background="red">red</div><div>bunny</div></div> </div>
CSS:
.tabelle div{display:table-row;} .tabelle div div{display:table-cell;}
Diese kannst du dann ohne Probleme auch positionieren.
Ich hoffe,das geht.
Beitrag zuletzt geändert: 4.2.2014 9:15:08 von thebigsmilexd -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
