Auf einen [Tweet](https://twitter.com/maddesigns/status/926198029991993344) meines geschätzten Kollegen hin hab ich mal mit responsiven Tabellen rumgespielt. Gängige Lösungen, den Daten eine Beschriftung zu verpassen, wenn sie auf schmalen Viewports nicht in Tabellenform angezeigt werden, waren bisher * entweder die Beschriftung der Tabellenspalten im Stylesheet zu hinterlegen (wie [im SELFHTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabellen_responsiv_gestalten#Anpassung_f.C3.BCr_schmale_und_sehr_schmale_Viewports) gezeigt) Nachteil: Die Beschriftung muss an verschiedenen Stellen gepflegt werden. Inhalte gehören nicht ins Stylesheet *(separation of concerns)*{:@en}. * oder die Beschriftung wird bei jeder Zelle in einem Attribut hinterlegt (im Wiki kurz erwähnt) Nachteil: vielfache Wiederholung derselben Beschriftungen, aufgeblähtes Markup Mit *custom properties*{:@en} (CSS-Variablen) steht nun ein Mittel zur Verfügung, das Beste beider Welten zu erreichen und keinen der Nachteile inkaufnehmen zu müssen: Die Beschriftungen der Datenzellen stehen im Markup nicht bei den einzelnen Zellen, sondern einmalig beim `table`-Element. ☞ Beispiel: [responsive table with custom properties](https://codepen.io/gunnarbittersmann/pen/BmjPGr){:@en} Nun werden die Beschriftungen aber immer noch doppelt angegeben, in den `th`-Elementen im Tabellenkopf sowie im `table`-Element. Das kann man vermeiden, indem man die Beschriftungen mit JavaScript aus den `th`-Elementen ausliest und in die *custom properties*{:@en} des `table`-Elements reinschreibt. ☞ Beispiel: Beispiel [responsive table with custom properties set with JavaScript](https://codepen.io/gunnarbittersmann/pen/QONpyz){:@en} Funktioniert auch – in Safari und Chrome. (Edge hab ich noch nicht getestet.) Nicht aber im Firefox. (EDIT: Das wurde im o.g. Beispiel [behoben](https://forum.selfhtml.org/self/2017/nov/4/responsive-tabellen-js-problem-mit-custom-properties-im-firefox/1707771#m1707771). Das Problem kann man unter [responsive table with custom properties set with JavaScript, Firefox bug](https://codepen.io/gunnarbittersmann/pen/qVZpzV){:@en} sehen.) Wenn man den Viewport von breit (Tabellendarstellung) auf schmal zieht, sind die Beschriftungen da. Wenn der Viewport aber beim Laden der Seite schmal ist, fehlen die Beschriftungen. Irgendwie kommt Firefox nicht hinterher, die *custom properties*{:@en} aufzudröseln. Hat jemand einen Tip, wie man dem Fuchs auf die Sprünge helfen kann? LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

Auf einen [Tweet](https://twitter.com/maddesigns/status/926198029991993344) meines geschätzten Kollegen hin hab ich mal mit responsiven Tabellen rumgespielt. Gängige Lösungen, den Daten eine Beschriftung zu verpassen, wenn sie auf schmalen Viewports nicht in Tabellenform angezeigt werden, waren bisher * entweder die Beschriftung der Tabellenspalten im Stylesheet zu hinterlegen (wie [im SELFHTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabellen_responsiv_gestalten#Anpassung_f.C3.BCr_schmale_und_sehr_schmale_Viewports) gezeigt) Nachteil: Die Beschriftung muss an verschiedenen Stellen gepflegt werden. Inhalte gehören nicht ins Stylesheet *(separation of concerns)*{:@en}. * oder die Beschriftung wird bei jeder Zelle in einem Attribut hinterlegt (im Wiki kurz erwähnt) Nachteil: vielfache Wiederholung derselben Beschriftungen, aufgeblähtes Markup Mit *custom properties*{:@en} (CSS-Variablen) steht nun ein Mittel zur Verfügung, das Beste beider Welten zu erreichen und keinen der Nachteile inkaufnehmen zu müssen: Die Beschriftungen der Datenzellen stehen im Markup nicht bei den einzelnen Zellen, sondern einmalig beim `table`-Element. ☞ Beispiel: [responsive table with custom properties](https://codepen.io/gunnarbittersmann/pen/BmjPGr){:@en} Nun werden die Beschriftungen aber immer noch doppelt angegeben, in den `th`-Elementen im Tabellenkopf sowie im `table`-Element. Das kann man vermeiden, indem man die Beschriftungen mit JavaScript aus den `th`-Elementen ausliest und in die *custom properties*{:@en} des `table`-Elements reinschreibt. ☞ Beispiel: [responsive table with custom properties set with JavaScript, Firefox bug](https://codepen.io/gunnarbittersmann/pen/qVZpzV){:@en} [^edit] [^edit]: EDIT: Link geändert, im ursprünglichen Beispiel [responsive table with custom properties set with JavaScript](https://codepen.io/gunnarbittersmann/pen/QONpyz){:@en} ist das Problem [behoben](https://forum.selfhtml.org/self/2017/nov/4/responsive-tabellen-js-problem-mit-custom-properties-im-firefox/1707771#m1707771). Funktioniert auch – in Safari und Chrome. (Edge hab ich noch nicht getestet.) Nicht aber im Firefox. Wenn man den Viewport von breit (Tabellendarstellung) auf schmal zieht, sind die Beschriftungen da. Wenn der Viewport aber beim Laden der Seite schmal ist, fehlen die Beschriftungen. Irgendwie kommt Firefox nicht hinterher, die *custom properties*{:@en} aufzudröseln. Hat jemand einen Tip, wie man dem Fuchs auf die Sprünge helfen kann? LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

Auf einen [Tweet](https://twitter.com/maddesigns/status/926198029991993344) meines geschätzten Kollegen hin hab ich mal mit responsiven Tabellen rumgespielt. Gängige Lösungen, den Daten eine Beschriftung zu verpassen, wenn sie auf schmalen Viewports nicht in Tabellenform angezeigt werden, waren bisher * entweder die Beschriftung der Tabellenspalten im Stylesheet zu hinterlegen (wie [im SELFHTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabellen_responsiv_gestalten#Anpassung_f.C3.BCr_schmale_und_sehr_schmale_Viewports) gezeigt) Nachteil: Die Beschriftung muss an verschiedenen Stellen gepflegt werden. Inhalte gehören nicht ins Stylesheet *(separation of concerns)*{:@en}. * oder die Beschriftung wird bei jeder Zelle in einem Attribut hinterlegt (im Wiki kurz erwähnt) Nachteil: vielfache Wiederholung derselben Beschriftungen, aufgeblähtes Markup Mit *custom properties*{:@en} (CSS-Variablen) steht nun ein Mittel zur Verfügung, das Beste beider Welten zu erreichen und keinen der Nachteile inkaufnehmen zu müssen: Die Beschriftungen der Datenzellen stehen im Markup nicht bei den einzelnen Zellen, sondern einmalig beim `table`-Element. ☞ Beispiel: [responsive table with custom properties](https://codepen.io/gunnarbittersmann/pen/BmjPGr){:@en} Nun werden die Beschriftungen aber immer noch doppelt angegeben, in den `th`-Elementen im Tabellenkopf sowie im `table`-Element. Das kann man vermeiden, indem man die Beschriftungen mit JavaScript aus den `th`-Elementen ausliest und in die *custom properties*{:@en} des `table`-Elements reinschreibt. ☞ Beispiel: [responsive table with custom properties set with JavaScript](https://codepen.io/gunnarbittersmann/pen/QONpyz){:@en} Funktioniert auch – in Safari und Chrome. (Edge hab ich noch nicht getestet.) Nicht aber im Firefox. Wenn man den Viewport von breit (Tabellendarstellung) auf schmal zieht, sind die Beschriftungen da. Wenn der Viewport aber beim Laden der Seite schmal ist, fehlen die Beschriftungen. Irgendwie kommt Firefox nicht hinterher, die *custom properties*{:@en} aufzudröseln. Hat jemand einen Tip, wie man dem Fuchs auf die Sprünge helfen kann? LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

Auf einen [Tweet](https://twitter.com/maddesigns/status/926198029991993344) meines geschätzten Kollegen hin hab ich mal mit responsiven Tabellen rumgespielt. Gängige Lösungen, den Daten eine Beschriftung zu verpassen, wenn sie auf schmalen Viewports nicht in Tabellenform angezeigt werden, waren bisher * entweder die Beschriftung der Tabellenspalten im Stylesheet zu hinterlegen (wie [im SELFHTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tabellen_responsiv_gestalten#Anpassung_f.C3.BCr_schmale_und_sehr_schmale_Viewports) gezeigt) Nachteil: Die Beschriftung muss an verschiedenen Stellen gepflegt werden. Inhalte gehören nicht ins Stylesheet *(separation of concerns)*{:@en}. * oder die Beschriftung wird bei jeder Zelle in einem Attribut hinterlegt (im Wiki kurz erwähnt) Nachteil: vielfache Wiederholung derselben Beschriftungen, aufgeblähtes Markup Mit *custom properties*{:@en} (CSS-Variablen) steht nun ein Mittel zur Verfügung, das Beste beider Welten zu erreichen und keinen der Nachteile inkaufnehmen zu müssen: Die Beschriftungen der Datenzellen steht im Markup nicht bei den einzelnen Zellen, sondern einmalig beim `table`-Element. ☞ Beispiel: [responsive table with custom properties](https://codepen.io/gunnarbittersmann/pen/BmjPGr){:@en} Nun werden die Beschriftungen aber immer noch doppelt angegeben, in den `th`-Elementen im Tabellenkopf sowie im `table`-Element. Das kann man vermeiden, indem man die Beschriftungen mit JavaScript aus den `th`-Elementen ausliest und in die *custom properties*{:@en} des `table`-Elements reinschreibt. ☞ Beispiel: [responsive table with custom properties set with JavaScript](https://codepen.io/gunnarbittersmann/pen/QONpyz){:@en} Funktioniert auch – in Safari und Chrome. (Edge hab ich noch nicht getestet.) Nicht aber im Firefox. Wenn man den Viewport von breit (Tabellendarstellung) auf schmal zieht, sind die Beschriftungen da. Wenn der Viewport aber beim Laden der Seite schmal ist, fehlen die Beschriftungen. Irgendwie kommt Firefox nicht hinterher, die *custom properties*{:@en} aufzudröseln. Hat jemand einen Tip, wie man dem Fuchs auf die Sprünge helfen kann? LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)