[Tutorial] [Alle Versionen] Responsive Tabellen mit mehreren Spalten in Beiträgen

von Kyra Mi 10 Feb 2021 - 15:40

Bitte nur für Forumieren-Foren verwenden und nicht als eigenen Code deklarieren

Warum ich dieses Tutorial erstelle:
Zum einen wollte ich auch einfach mal etwas zurückgeben. Ich habe hier im Support schon einige Stunden verbracht und nach Lösungen für diverse Probleme gesucht.
Jetzt gebe ich auch mal etwas zurück Wink

Zum anderen: In meinem Forum nutzen fast 80% aller User die mobile Version, und ich denke, dass ich da nicht die einzige Forumsbesitzerin bin bzw. es mit der Zeit auch immer mehr werden.
Da ich aber gerne mit Tabellen arbeite, hat sich bei mir ein Problem entwickelt: Wenn ich eine Tabelle mit mehreren Spalten erstelle, sieht es zwar auf der klassischen Version auf dem Desktop noch gut aus. Doch in der mobilen Version werden die Spalten so stark gequetscht und unnatürlich in die Länge gezogen, dass man den Inhalt nicht mehr wirklich lesen kann.
Eine Tabelle mit 8 Spalten, die ich kürzlich für ein RPG erstellt hatte, war also für meine smartphone-affinen User quasi unbrauchbar.

Daher möchte ich euch zwei Möglichkeiten -eine einfache und eine etwas kniffligere- aufzeigen, wie ihr dieses Problem lösen könnt.

Voraussetzungen für beide Varianten:

"HTML immer akzeptieren" muss in den Profileinstellungen auf Ja stehen
Administrations-Bereich Allgemeines Nachrichten und Emails Einstellungen Beiträge
- HTML erlauben: Ja
- Ungeschütztes HTML zulassen: mind. für Administratoren und/oder Moderatoren zulassen
Es handelt sich um eine Tabelle mit mehr als 1 Spalte

Variante A - scrollbare Tabellen - Schwierigkeit: einfach:

Variante B - Spalten sortieren sich untereinander - Schwierigkeit: fortgeschritten:

Variante A ist zwar einfach umzusetzen, sieht aber optisch eher semi aus. Daher nun eine Möglichkeit wie sich die Tabellenspalten in der mobilen Version automatisch untereinander anordnen, in der klassischen aber nebeneinander bestehen bleiben.

Zuerst einmal müssen wir uns von den bekannten Tabellen-Codes verabschieden und erstellen stattdessen mit div-containern den Anschein einer Tabelle.
Der Code beinhaltet wieder eine Tabelle mit 4 Spalten und 3 Zeilen als Beispiel, und muss in den entsprechenden Beitrag eingefügt werden.

Code:: <div class="divtabelle" style="border:1px solid black; width:25%"><div class="divtd" align="center">Inhalt Reihe 1 Spalte 1</div><div class="divtd" align="center" style="border-top:1px solid black; border-bottom:1px solid black">Inhalt Reihe 2 Spalte 1</div><div class="divtd" align="center" >Inhalt Reihe 3 Spalte 1</div></div><div class="divtabelle" style="border:1px solid black; width:25%"><div class="divtd" align="center">Inhalt Reihe 1 Spalte 2</div><div class="divtd" align="center" style="border-top:1px solid black; border-bottom:1px solid black">Inhalt Reihe 2 Spalte 2</div><div class="divtd" align="center">Inhalt Reihe 3 Spalte 2</div></div><div class="divtabelle" style="border:1px solid black; width:25%"><div class="divtd" align="center">Inhalt Reihe 1 Spalte 1</div><div class="divtd" align="center" style="border-top:1px solid black; border-bottom:1px solid black">Inhalt Reihe 2 Spalte 3</div><div class="divtd" align="center">Inhalt Reihe 3 Spalte 3</div></div><div class="divtabelle" style="border:1px solid black; width:25%"><div class="divtd" align="center">Inhalt Reihe 1 Spalte 4</div><div class="divtd" align="center" style="border-top:1px solid black; border-bottom:1px solid black">Inhalt Reihe 2 Spalte 4</div><div class="divtd" align="center">Inhalt Reihe 3 Spalte 4</div></div>

Zusätzlich dazu müsst ihr im CSS folgenden Eintrag vornehmen:

Code:: .divtabelle{ display:inline-block;} @media only screen and (max-width: 500px) { .divtabelle { display: block; width:100% !important;} }

Zur Erklärung:

width:25% --> die Breite der "Div-Tabelle" richtig sich immer danach, wie viele "Spalten" es geben soll. In unserem Beispiel haben wir 4 Spalten, also liegt die Breite einer "Div-Tabelle" bei 25%. Möchte ich 5 Spalten haben, verringert sich die Breite auf 20%. Möchte ich hingegen nur 2 Spalten haben, muss ich 50% als Breite auswählen usw.
.divtabelle{display:inline-block --> so zwingen wir die einzelnen Div-Tabellen sich generell nebeneinander anzuordnen. Die class "divtabelle" und "divtd" kann natürlich nach Belieben geändert werden. Denkt aber daran sie sowohl in eurem Beitrag als auch im CSS entsprechend zu ändern, sonst funktioniert es nicht!
@media only screen and (max-width:500px) --> wie oben auch schon erwähnt, legen wir hier fest, ab welcher Bildschirmbreite sich die Tabellen anders anordnen sollen
display:block --> so zwingen wir die Tabellen sich untereinander anzuordnen bis 500px Bildschirmbreite
width:100% !important --> so legen wir fest, dass jede Tabelle den ihr zur Verfügung stehenden Platz in der Breite voll ausfüllen soll

Ich habe beide Varianten mal in meinem Testforum eingestellt.
Hier könnt ihr bequem ausprobieren, wie das ganze mit großem und kleinem Bildschirm aussieht. ->klick

Die Tabellen können natürlich auch noch farblich etc. mit den entsprechenden CSS- oder HTML-Einträgen ausgeschmückt werden.

1 Tipp noch: wenn eure Div-Tabellen unterschiedlich lange Inhalte haben, kann es passieren, dass die einzelnen Tabellen auch unterschiedlich hoch angezeigt werden. Das könnt ihr umgehen, indem ihr entweder all euren Div-Tabellen eine feste Größe gebt, z.B. 200px

Code:: <div class="divtabelle" style="....;height:200px">....

oder indem ihr nur den Zellen mit großem Inhalt eine feste Größe zuweist und sie dann vertikal scrollbar macht

Code:: <div class="divtd" align="center" style="height:200px;overflow-y:auto">...

Gerne dürft ihr die Tutorials bei euch verwenden. Sollte es Probleme geben oder jemand einen Fehler in meinem Tutorial finden, gerne melden Wink

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	