Tabellen in Resposive templates

HTML Tabellen im Content dürfen das layout der templates nicht zerstören, bitte hen ansprechen für ein e Lösung (CSS Tricks für responsive Tabellen)

Zuerst wird die Tabelle nicht größer als 100%. Zusätzlich habe ich es standardmäßig noch ein bisschen schöner gestaltet, aber mehr kann man nicht machen. Das Problem ist es, dass es verschiedene Tabellen gibt: kleine, große, RIESIGE, mit und ohne <thead>, Überschriften nur oben, links oder oben und links.

Im Internet gibt es zwar paar Lösungen, aber alle benötigen Eingriff in die HTML Struktur, oder man macht es mit JS. Aber egal, wie man das macht, findet man leider keine einheitliche Lösung für alle Tabellen Typen.

Am schönsten finde ich die Idee mit HTML & CSS data-attribut, wo man in mobil Ansicht das thead wegmacht und td::before Attribut mit content: attr(...) hinzufügt. Das setzt jedoch voraus, dass die Tabelle schon mit passendendata-Attributen vorgesehen ist (oder man setzt die Attribute mit JS).

Hier ein Beispiel: http://codepen.io/maddesigns/full/pHqnt

Hier noch ein Blogbeitrag, der die verschiedenen Möglichkeiten kurz erklärt: https://blog.kulturbanause.de/2012/06/tabellen-im-responsive-webdesign/

Aber wie schon gesagt, die Tabellen müssen schon "richtig" von Benutzer erstellt werden, was sicherlich nur selten passieren wird ;) Z.B. auf TC-Blau (http://tcbg.pcsg3.pcsg-server.de/Mitgliedschaft/Beitr%C3%A4ge-Modalit%C3%A4ten) müsste man die Tabelle umstrukturieren aber trotzdem wegen Zeilenumbruch </ br> wird es schwierig hier was vernünftig zu machen. Alternativ die Tabelle mit Überschriften und data-attribut versehen.

Eine allgemeine (aber nicht unbedingt benutzerfreundliche) Lösung wäre es, jede Tabelle mit einem <div> umzuschließen und die CSS Eigenschaft overflow-y: auto hinzuzufügen (dann auch width auf 100% zulassen). So wie es im Moment aussieht, kann das Template nur bedingt eine Tabelle formatieren und der Rest soll individuell angepasst werden (oder zum Teil über JS).

Weitere Beispiele:

https://elvery.net/demo/responsive-tables/

https://css-tricks.com/examples/ResponsiveTables/responsive.php

wie gesagt erst mal schauen das keine Tabelle das template zerschießen kann, danach können wir dann vorlagen über den Editor im Template mitliefern.

changed milestone to %Version 1.2