tag:forum.selfhtml.org,2005:/self Fester Tabellenheader mit CSS – SELFHTML-Forum 2016-03-09T21:29:03Z https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662700#m1662700 Marvin Esse 2016-03-09T06:07:56Z 2016-03-09T06:07:56Z Fester Tabellenheader mit CSS <p>Hallo,</p> <p>auf der Suche nach einer eleganten Möglichkeit, wie ich scrollbare Tabellen mit festen Header bekomme, bin ich auf den folgenden Fiddle gestoßen: <a href="https://jsfiddle.net/dPixie/byB9d/3/light/" rel="noopener noreferrer">Fiddle</a> Nur leider verstehe ich nicht, wie es gemacht wurde.</p> <p>Kann mir einer erklären wie das funktioniert? Die Table-Header-Zeile hat z.B. Klasse header bekommen, aber diese ist in den CSS nirgends definiert ?? Ich vermute, dass nur das CSS für die th-Tags und die im th-Tag enthaltenen DIV das Geheimnis sind?</p> <p>Gruß,</p> <p>Marvin</p> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662703#m1662703 Matthias Apsel 2016-03-09T06:54:32Z 2016-03-09T06:54:32Z Fester Tabellenheader mit CSS <p>Hallo Marvin Esse,</p> <p>Schau dir mal <a href="https://forum.selfhtml.org/self/2013/feb/25/tabelle-ohne-titelzeile-scrollen/1572953#m1572953" rel="noopener noreferrer">Tabelle ohne Titelzeile scrollen</a> an.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662704#m1662704 Marvin Esse 2016-03-09T07:22:59Z 2016-03-09T07:22:59Z Fester Tabellenheader mit CSS <p>Hallo Matthias,</p> <blockquote> <p>Schau dir mal <a href="https://forum.selfhtml.org/self/2013/feb/25/tabelle-ohne-titelzeile-scrollen/1572953#m1572953" rel="noopener noreferrer">Tabelle ohne Titelzeile scrollen</a> an.</p> </blockquote> <p>Ich habe mir die dortige Lösung angeschaut und werde versuchen das bei mir einzubauen. Vielen dank für den Tipp.</p> <p>Marvin</p> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662711#m1662711 Marvin Esse 2016-03-09T09:45:40Z 2016-03-09T09:45:40Z Fester Tabellenheader mit CSS <blockquote> <p>Ich habe mir die dortige Lösung angeschaut und werde versuchen das bei mir einzubauen.</p> </blockquote> <p>Wenn ich das richtig erkenne, wird hier auch die Verwendung von festen vorgegebenen Breiten für die Felder im Header und Body der Tabelle vorausgesetzt. Auch muss die Höhe des Headers angegeben werden. Das ist bei meinen dynamischen Tabellen leider nur bedingt einsetzbar.</p> <p>Wäre es denkbar mit etwas Javascript das DIV nach dem Rendern der Tabelle korrekt zu positionieren?</p> <p>Marvin</p> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662712#m1662712 Matthias Apsel 2016-03-09T09:56:06Z 2016-03-09T09:56:06Z Fester Tabellenheader mit CSS <p>Hallo Marvin Esse,</p> <blockquote> <p>Wäre es denkbar mit etwas Javascript das DIV nach dem Rendern der Tabelle korrekt zu positionieren?</p> </blockquote> <p>Denkbar schon, aber das will man eigentlich nicht. <a href="http://www.imaputz.com/cssStuff/bigFourVersion.html" rel="nofollow noopener noreferrer">Dieser Entwurf</a> schaut auf den ersten Blick bis auf die Klassen für die Tabellenzeilen auch ganz gut aus.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662730#m1662730 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-03-09T13:08:39Z 2016-03-09T13:08:39Z Fester Tabellenheader mit CSS <p>@@Marvin Esse</p> <blockquote> <p>Wenn ich das richtig erkenne, wird hier auch die Verwendung von festen vorgegebenen Breiten für die Felder im Header und Body der Tabelle vorausgesetzt. Auch muss die Höhe des Headers angegeben werden.</p> </blockquote> <p>Ich hab da mal <a href="http://codepen.io/gunnarbittersmann/pen/PNqzgP" rel="noopener noreferrer">was gebastelt</a>, was ohne feste Breiten auskommt.</p> <p>Ist aber noch eine Bastelei, ohne Anspruch, allen Fällen gerecht zu werden.</p> <p>Unschön auch, dass im Firefox auf Systemen, die Scrollbars nicht über dem Inhalt, sondern daneben darstellen, ebensolche zu sehen sind, auch wenn sie nicht gebraucht werden.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662713#m1662713 JürgenB 2016-03-09T10:17:32Z 2016-03-09T10:17:32Z Fester Tabellenheader mit CSS <p>Hallo,</p> <blockquote> <p><a href="http://www.imaputz.com/cssStuff/bigFourVersion.html" rel="nofollow noopener noreferrer">Dieser Entwurf</a> schaut auf den ersten Blick bis auf die Klassen für die Tabellenzeilen auch ganz gut aus.</p> </blockquote> <p>wenn ich das richtig sehe, haben hier die Tabellenfelder aber auch feste Breiten.</p> <p>Ich habe das gerade noch mal bei meiner Variante getestet: wenn man die Breiten weg lässt, sind die Tabellenfelder im thead und im tbody nicht mehr gleich breit.</p> <p>Eine Javascript-Lösung wäre zwar nicht schön, aber möglich. Sie müsste die Breiten spaltenweise auf das Maximum der Breite von Kopf und Körperzelle setzen. Ohne Javascript wären die Zellen dann unterschiedlich Breit, aber man könnte ja für diesen Fall allen die gleiche Breite geben.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662732#m1662732 JürgenB 2016-03-09T13:29:41Z 2016-03-09T13:29:41Z Fester Tabellenheader mit CSS <p>Hallo Gunnar,</p> <blockquote> <p>Ich hab da mal <a href="http://codepen.io/gunnarbittersmann/pen/PNqzgP" rel="noopener noreferrer">was gebastelt</a>, was ohne feste Breiten auskommt.</p> </blockquote> <p>sieht schon mal gut aus. Gut, das du keine umschließenden Elemente benötigst. Ich habe aber eine Frage:</p> <p>Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662791#m1662791 JürgenB 2016-03-09T21:29:03Z 2016-03-09T21:29:03Z Fester Tabellenheader mit CSS <p>Hallo Gunnar,</p> <p>ich habe deine Bastelei getestet:</p> <p>OK in<br> FF unter Windows<br> FF unter OS X<br> Safari<br> Edge<br> IE 8-11 im Edge emuliert</p> <p>Fast OK, da der tbody wegen des Scrollbars breiter ist, als der thead<br> Chrome unter Windows</p> <p>Gruß<br> Jürgen</p> <p>PS Mein altes Windows Phone (7.8) wird leider von codepen nicht unterstützt</p> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662733#m1662733 Matthias Apsel 2016-03-09T13:34:17Z 2016-03-09T13:34:17Z Fester Tabellenheader mit CSS <p>Hallo JürgenB,</p> <blockquote> <p>Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.</p> </blockquote> <p>Damit ist sichergestellt, dass wirklich für wirklich alle Elemente <code>box-sizing: border-box</code> gilt. Damit lassen sich Abmessungen von Elementen ohne Rücksicht auf Innenabstände festlegen. Siehe auch <a href="https://wiki.selfhtml.org/wiki/Box-sizing" rel="nofollow noopener noreferrer">box-sizing</a> im Wiki.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662734#m1662734 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-03-09T13:35:15Z 2016-03-09T13:35:15Z Fester Tabellenheader mit CSS <p>@@JürgenB</p> <blockquote> <p>Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.</p> </blockquote> <p>Damit die Umschaltung des Boxmodells auch auf Pseudoelemente wirkt.</p> <p>Braucht man hier vielleicht nicht. Aber besser gleich mit reinschreiben als es später zu vergessen.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> https://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662736#m1662736 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-03-09T13:37:58Z 2016-03-09T13:37:58Z Fester Tabellenheader mit CSS <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.</p> </blockquote> <p>Damit ist sichergestellt, dass wirklich für wirklich alle Elemente <code>box-sizing: border-box</code> gilt.</p> </blockquote> <p>Das ist doch schon mit <code>*</code> sichergestellt. ;-)</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div>