nicht angemeldet
MudGuard
Gunnar Bittersmann
Rolf B
JürgenB
JürgenB
Gunnar Bittersmann
Hallo,
ich habe folgendes Problem und finde im Netz keine Lösung dazu. Ich habe eine Tabelle mit mehreren Theads. Diese Theads sollen wenn man im Tbody scrollt im oberen bereich fixiert bleiben. Wenn dann der zweite Thead erscheint soll dieser dann oben fixiert bleiben und immer so weiter. Leider schaffe ich es nur, dass immer nur der erste Thead fixiert bleibt.
Da ich leider sehr wenig Erfahrung in Jquerry und JS habe, habe ich daher ein Script aus dem Web verwendet, der mein Thead fixiert.
Hat einer eine Idee wie man dieses Problem lösen kann?
Gunnar Bittersmann
Rolf B
Hi,
Ich habe eine Tabelle mit mehreren Theads.
Sind denn mehrere thead-Elemente in einer Tabelle erlaubt?
In der (inzwischen zugegebenermaßen uralten) HTML 4.01 war nur maximal ein thead erlaubt (auch nur maximal ein tfoot, tbody dagegen war mindestens einer Pflicht und mehrere erlaubt) …
cu,
Andreas a/k/a MudGuard
Du hast Recht. Normalerweise hat eine Tabelle nur ein Thead und ein Tfoot. Aber meine "Monster-Tabelle" was eine Statisitk anzeigen soll hat mehrere Theads und ist sowieso nicht valide. Ich soll diese Monster-Tabelle nur fixieren. Also Theads nacheinander fixieren und die erste Spalte soll fixiert bleiben.
@@MiePie94
Ich habe eine Tabelle mit mehreren Theads.
Wie MudGuards schlammiges wachsames Auge schon bemerkte: gibt’s nicht.
Diese Theads sollen wenn man im Tbody scrollt im oberen bereich fixiert bleiben. Wenn dann der zweite Thead erscheint soll dieser dann oben fixiert bleiben und immer so weiter.
Meinst du das so in der Art?
LLAP 🖖
Hallo Gunnar,
zum Verständnis für Web-Einsteiger sollte man darauf hinweisen, dass die Magie in der CSS-Eigenschaft position:sticky der th Elemente stickt, äh, steckt.
Was ich nur nicht verstehe, ist dieser Satz dazu aus unserem Wiki (MDN schreibt ähnliches):
Elemente mit dieser Eigenschaft behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben.
Am unteren Seitenende beobachte ich den Effekt nicht.
Rolf
Hallo
Was ich nur nicht verstehe, ist dieser Satz dazu aus unserem Wiki (MDN schreibt ähnliches):
Elemente mit dieser Eigenschaft behalten ihre Position im Elementfluss, bis sie das obere oder untere Seitenende erreichen und dort „kleben“ bleiben.
Am unteren Seitenende beobachte ich den Effekt nicht.
In Gunnars Beispielcode ist ja für th auch top: 0; angegeben. Also kleben die entsprechenden Elemente „nur“ oben.
Tschö, Auge
Hallo Auge,
wie gut, dass wir drüber reden. Zum Dokulesen hatte ich keine Zeit.
Mit bottom:0 klappt's übrigens schlechter, da stimmt die z-order nicht und man sieht nur den Z Header.
Rolf
Hallo
wie gut, dass wir drüber reden. Zum Dokulesen hatte ich keine Zeit.
Das habe auch ich nicht getan. Ich hatte mich nur über deinen Einwurf gewundert und mir daraufhin Gunnars Code angeschaut.
Mit bottom:0 klappt's übrigens schlechter, da stimmt die z-order nicht und man sieht nur den Z Header.
Was meinst du mit „Z Header“ und warum sollte die z-order nicht mehr stimmen? Kannst du bitte mal ein Beispiel skizzieren?
Mir fällt übrigens außer dem Footer, der, wenn er in den Viewport hineinkommt, unten stehen bleiben soll, keine Anwendung für ein unter Umständen unten feststehendes Element ein. Aber das will ja nichts heißen.
Tschö, Auge
Hallo Auge,
ich meine die Row mit "Z" als th Inhalt. Bei bottom:0 ist von den sticky-Elementen nur diese sichtbar, weil alle th den gleichen z-index haben und darum der in der z-order oben ist, der im HTML als letztes steht. Um unten die Row anzuzeigen, die der untersten sichtbaren Row folgt (was das Äquivalent zum sticky header wäre), müsste man die z-order auf den Kopf stellen. D.h. die z-order an sich ist natürlich ok, aber um die Methode am unteren Rand anwenden zu können, passt sie nicht.
Einen Anwendungsfall habe ich dafür gerade auch nicht, mir fiel einfach nur auf dass dieser elegante Trick, der die sticky headers einfach alle oben stapelt, ausschließlich am oberen (und linken) Rand funktioniert.
Rolf
Genau sowas habe ich gesucht. Vielen Dank schonmal. Werde ich einmal bei mir einbauen. Das andere Problem was ich noch habe ist, dass die erste Spalte fixiert sein soll wenn man nach rechts scrollt. Habt ihr da auch eine Lösung? Die bisherigen Lösungen im Web sind nicht sehr vielversprechend.
Ich habe das Problem dank position: sticky gelöst. Wie ihr hier sehen könnt.
Ich habe mehrere Theads (ja ich weiß, dass mehrere Theads nicht valide sind, aber für meinen Fall hat die Tabelle mehrere Theads) fixiert und die erste Spalte bleibt nun auch fixiert.
Ich danke für die schnelle Hilfe und vielleicht braucht das jemand nochmal. Daher habe ich das Beispiel hier nochmal veröffentlich.
Hallo,
hast du dir das schon mal im iPhone angesehen?
Gruß
Jürgen
Nein habe ich noch nicht. Gibt es Darstellungsprobleme?
Hey,
du hast Recht. Safari scheint diese CSS Eigenschaft nicht zu haben. Selbst mit -webkit-sticky scheint dieses Problem nicht zu lösen. Ich habe diese Seite gefunden. Dieses Plugin hat mir geholfen und funktioniert jetzt auch in Safari.
Ich habe noch nicht geschaut wie sich der IE / Edge verhält dazu. Außerdem habe ich kein Iphone um dies mobil zu testen.
@@MiePie94
Safari scheint diese CSS Eigenschaft nicht zu haben.
Doch, natürlich unterstützt Safari das – mit Präfix. Den hab ich jetzt im Codepen ergänzt.
Ich würde denken, dass das sogar von Apple kommt. Das Kontaktverzeichnis auf dem iPhone bspw. verhält sich genauso wie die gezeigte Tabelle.
LLAP 🖖
Hallo Gunnar,
in meinem 6er wird immer noch die ganze Tabelle gescrollt. Da ist nichts „sticky“.
Gruß
Jürgen
@@JürgenB
in meinem 6er wird immer noch die ganze Tabelle gescrollt. Da ist nichts „sticky“.
Safari 6 auf macOS? Laut Can I Use geht’s da ab 6.1.
Ist die Tabelle lesbar? Gut. Sticky ist progressive enhancement für moderne Browser.
LLAP 🖖
Hallo Gunnar,
in meinem 6er wird immer noch die ganze Tabelle gescrollt. Da ist nichts „sticky“.
Safari 6 auf macOS? Laut Can I Use geht’s da ab 6.1.
nein, iPhone 6, aktuelle Updates.
Ist die Tabelle lesbar? Gut. Sticky ist progressive enhancement für moderne Browser.
ja, ist sie. Aber den aktuellen iPhone-Safari würde ich jetzt mal als „aktuell“ ansehen. 😉
Gruß
Jürgen
@@MiePie94
Ich habe das Problem dank position: sticky gelöst. Wie ihr hier sehen könnt.
Ich habe mehrere Theads (ja ich weiß, dass mehrere Theads nicht valide sind, aber für meinen Fall hat die Tabelle mehrere Theads)
Es ist sicher keine gute Idee sich darauf zu verlassen, dass alle Clients fehlerhaftes Markup gleich darstellen (auch wenn HTML5 das vereinheitlicht hat).
Was spricht dagegen, in jedem tbody (ja, davon darf es mehrere geben) die jeweils erste Zeile als Überschrift mit th-Zellen vorzusehen?
Ansonsten wäre zu überlegen, ob das wirklich eine Tabelle ist und nicht etwa mehrere.
fixiert und die erste Spalte bleibt nun auch fixiert.
Dem umgebenden div solltest du noch role="region" tabindex="0" mitgeben, siehe dieses Posting unten.
LLAP 🖖
Es ist sicher keine gute Idee sich darauf zu verlassen, dass alle Clients fehlerhaftes Markup gleich darstellen (auch wenn HTML5 das vereinheitlicht hat).
Was spricht dagegen, in jedem tbody (ja, davon darf es mehrere geben) die jeweils erste Zeile als Überschrift mit th-Zellen vorzusehen?
Ja das mag stimmen, aber diese Tabelle bekomme ich und existiert so. Ich habe nur die Aufgabe deren Kopfbereiche und erste Spalte zu fixieren. Die Tabelle wird durch eine SQL und PHP Abfrage dann generiert.
@@MiePie94
Ja das mag stimmen, aber diese Tabelle bekomme ich und existiert so. Ich habe nur die Aufgabe deren Kopfbereiche und erste Spalte zu fixieren. Die Tabelle wird durch eine SQL und PHP Abfrage dann generiert.
Es ist Aufgabe des Backends, korrektes Mark-up zu generieren.
Es ist Aufgabe der Backend-Entwickler, diesen Fehler zu korrigieren.
LLAP 🖖
Hey,
da stimme ich dir zu. Danke trotzdem für deine Hilfe und Tipps :)
Auge