I don’t wanna flex, but ... (flex bei td-Element anwenden) – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes I don’t wanna flex, but ... (flex bei td-Element anwenden) Thu, 15 Dec 22 11:37:20 Z https://forum.selfhtml.org/self/2022/dec/15/i-dont-wanna-flex-but-flex-auf-td-element-anwenden/1804671?srt=yes#m1804671 https://forum.selfhtml.org/self/2022/dec/15/i-dont-wanna-flex-but-flex-auf-td-element-anwenden/1804671?srt=yes#m1804671 <p>Hallo zusammen,</p> <p>um meine Tabelle auch auf kleinem Viewport gut anzeigen zu können, habe ich (bis max-width: 720px) die Tabellenzellen des tbody mit einem <code>display: flex</code> versehen. Ich kann mir zwar vorstellen, dass es kurios ist, dies bei einem Tabellen-Element zu machen, aber es war die einzige Möglichkeit, das, was ich bezwecken wollte, umzusetzen.</p> <pre><code class="block language-css"><span class="token selector">tbody td</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> inherit <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5rem <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-css"><span class="token selector">tbody td::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-label<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> .25rem .75rem<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> .75rem<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg 5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--font 2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> .09em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Sobald die Seite zu klein wird, kommt das data-label zum Einsatz, um die Pseudo-Table-Headers links bei jedem Eintrag anzuzeigen. Ohne flexbox wurde bei zu langen Inhalten, der Überhang in der nächsten Zeile unter das Pseudo-Element geschoben und ich konnte das nicht verhindern.</p> <p>Ich merke gerade, es ist echt schwierig, das zu erklären. Daher siehe problematische Seite.</p> <p>Gibt es irgendetwas, das gegen die Verwendung von display: flex bei einem td-Element spricht?</p> <p>Grüße<br> Boris</p> I don’t wanna flex, but ... (flex bei td-Element anwenden) Thu, 15 Dec 22 13:44:13 Z https://forum.selfhtml.org/self/2022/dec/15/i-dont-wanna-flex-but-flex-auf-td-element-anwenden/1804686?srt=yes#m1804686 https://forum.selfhtml.org/self/2022/dec/15/i-dont-wanna-flex-but-flex-auf-td-element-anwenden/1804686?srt=yes#m1804686 <p>@@borisbaer</p> <blockquote> <p>Sobald die Seite zu klein wird, kommt das data-label zum Einsatz, um die Pseudo-Table-Headers links bei jedem Eintrag anzuzeigen.</p> </blockquote> <p>Da hast du aber viel Markup. Vielleicht sind die <a href="https://codepen.io/gunnarbittersmann/pen/QONpyz" rel="noopener noreferrer">Codepens mit</a> und <a href="https://codepen.io/gunnarbittersmann/pen/BmjPGr" rel="noopener noreferrer">ohne JavaScript</a> und dieser <a href="https://forum.selfhtml.org/self/2017/nov/4/responsive-tabellen-js-problem-mit-custom-properties-im-firefox/1707767#m1707767" rel="noopener noreferrer">Thread zu responsiven Tabellen</a> was für dich.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> I don’t wanna flex, but ... (flex bei td-Element anwenden) Thu, 15 Dec 22 20:20:51 Z https://forum.selfhtml.org/self/2022/dec/15/i-dont-wanna-flex-but-flex-auf-td-element-anwenden/1804693?srt=yes#m1804693 https://forum.selfhtml.org/self/2022/dec/15/i-dont-wanna-flex-but-flex-auf-td-element-anwenden/1804693?srt=yes#m1804693 <p>Hallo Gunnar,</p> <blockquote> <p>Da hast du aber viel Markup. Vielleicht sind die <a href="https://codepen.io/gunnarbittersmann/pen/QONpyz" rel="noopener noreferrer">Codepens mit</a> und <a href="https://codepen.io/gunnarbittersmann/pen/BmjPGr" rel="noopener noreferrer">ohne JavaScript</a> und dieser <a href="https://forum.selfhtml.org/self/2017/nov/4/responsive-tabellen-js-problem-mit-custom-properties-im-firefox/1707767#m1707767" rel="noopener noreferrer">Thread zu responsiven Tabellen</a> was für dich.</p> </blockquote> <p>ja, da kommt bisschen was zusammen. Allerdings möchte ich gerne, dass es so aussieht, wie es das momentan tut, … und mit weniger war es nicht machbar.</p> <p>Du hattest mir die beiden ersten Links schon mal angeraten und tatsächlich haben die mich überhaupt erst auf die Idee gebracht, dass man eine Tabelle so organisieren kann. Nur wollte ich eben, dass die Pseudo-Elemente als eine Art „feste Spalte“ fungieren. Das ging bei mir nur mit flex.</p> <p>Da du dich nicht gegen die Verwendung von flex an dieser Stelle ausgesprochen hast, schätze ich, es spricht per se nichts dagegen, dies hier anzuwenden. Ein Workaround kenne ich nicht.</p> <p>Den Thread schaue ich mir bei Gelegenheit auch mal genauer an, danke!</p> <p>Grüße<br> Boris</p>