tag:forum.selfhtml.org,2005:/selfFester Tabellenheader mit CSS – SELFHTML-Forum2016-03-09T21:29:03Zhttps://forum.selfhtml.org/self/2016/mar/9/fester-tabellenheader-mit-css/1662700#m1662700Marvin Esse2016-03-09T06:07:56Z2016-03-09T06:07:56ZFester 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#m1662703Matthias Apsel2016-03-09T06:54:32Z2016-03-09T06:54:32ZFester 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#m1662704Marvin Esse2016-03-09T07:22:59Z2016-03-09T07:22:59ZFester 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#m1662711Marvin Esse2016-03-09T09:45:40Z2016-03-09T09:45:40ZFester 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#m1662712Matthias Apsel2016-03-09T09:56:06Z2016-03-09T09:56:06ZFester 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#m1662730Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2016-03-09T13:08:39Z2016-03-09T13:08:39ZFester 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#m1662713JürgenB2016-03-09T10:17:32Z2016-03-09T10:17:32ZFester 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#m1662732JürgenB2016-03-09T13:29:41Z2016-03-09T13:29:41ZFester 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#m1662791JürgenB2016-03-09T21:29:03Z2016-03-09T21:29:03ZFester 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#m1662733Matthias Apsel2016-03-09T13:34:17Z2016-03-09T13:34:17ZFester 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#m1662734Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2016-03-09T13:35:15Z2016-03-09T13:35:15ZFester 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#m1662736Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2016-03-09T13:37:58Z2016-03-09T13:37:58ZFester 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>