responsive Tabellen; JS-Problem mit custom properties im Firefox

[Gunnar Bittersmann]

Auf einen Tweet 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 gezeigt)
  Nachteil: Die Beschriftung muss an verschiedenen Stellen gepflegt werden. Inhalte gehören nicht ins Stylesheet (separation of concerns).

• 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 (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

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 des table-Elements reinschreibt.
☞ Beispiel: Beispiel responsive table with custom properties set with JavaScript

Funktioniert auch – in Safari und Chrome. (Edge hab ich noch nicht getestet.) Nicht aber im Firefox. (EDIT: Das wurde im o.g. Beispiel behoben. Das Problem kann man unter responsive table with custom properties set with JavaScript, Firefox bug 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 aufzudröseln. Hat jemand einen Tip, wie man dem Fuchs auf die Sprünge helfen kann?

LLAP 🖖