Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» [Klassische Version] Gründer/Admin Passwort vergessen / Forum löschenvon Joost Sa 31 Aug 2024 - 21:49
» Eigene Bildergalerie entfernen
von Joost Mi 28 Aug 2024 - 11:22
» Neu: Grid layout-Design für AwesomeBB und ModernBB
von Joost Fr 16 Aug 2024 - 7:44
» [Invision] Profil Drop Down verschoben
von Skouliki Sa 20 Jul 2024 - 17:01
» [Invision] Erklärung PWA Aktivierung + Mobile Version Problem
von Skouliki Do 18 Jul 2024 - 23:47
» [Invision] Beschreibung der Kategore einfügen
von Joost Mi 17 Jul 2024 - 8:52
» [Invision] Gefällt mir Button erscheint nicht
von Joost Mo 15 Jul 2024 - 18:14
» Goldhauch´s Plauderforum
von Joost Fr 12 Jul 2024 - 19:34
» [Invision] User Style Änderung - Code geht nicht
von Skouliki Do 11 Jul 2024 - 23:03
» [PunBB] Forum aufsplitten/teilen - ist das möglich?
von Joost Mi 10 Jul 2024 - 17:46
» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
von Joost Mo 24 Jun 2024 - 17:20
» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 20:52
» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 20:26
» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 19:35
» Gründer E-Mailadresse ändern
von Skouliki Fr 7 Jun 2024 - 12:49
» Nach Wartung Datenbankfehler
von Joost Mo 3 Jun 2024 - 12:34
» Wartung geplant Montag, 3. Juni 2024
von Joost So 2 Jun 2024 - 8:04
» Anti-Spam-Prüfung bei Mitgliedern
von Skouliki So 12 Mai 2024 - 18:10
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Neu: Grid layout-Design für AwesomeBB und ModernBB ( 1 )
» Beitrag von Trueman in Eigene Bildergalerie entfernen
( 1 )
» Beitrag von Trueman in Eigene Bildergalerie entfernen
( 1 )
» Beitrag von Silicon9 in [Klassische Version] Gründer/Admin Passwort vergessen / Forum löschen
( 1 )
[Tutorial] [Alle Versionen] Responsive Tabellen mit mehreren Spalten in Beiträgen
Seite 1 von 1 • Teilen
[Tutorial] [Alle Versionen] Responsive Tabellen mit mehreren Spalten in Beiträgen
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
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
- Variante A - scrollbare Tabellen - Schwierigkeit: einfach:
- Hierzu braucht ihr quasi keine HTML-Kenntnisse, sondern könnt eure Tabelle (hier als Beispiel mit 4 Spalten und 3 Zeilen) einfach in folgenden Code packen:
- Code:
<div style="overflow-x:auto"> [table][tr][td].....[/td][/tr][/table]</div>
Zusätzlich dazu müsst ihr im CSS folgenden Eintrag vornehmen:- Code:
@media only screen and (max-width:500px){
.post-content table, .postbody table{
width:100% !important;
word-break:normal;
}}
Zur Erklärung:- overflow-x:auto --> wir geben an, dass sobald die Tabelle größer wird, als der ihr zur Verfügung stehende Platz, soll sie scrollbar sein
- @media only screen and (max-width:500px) --> hier legen wir fest, ab welcher Bildschirmbreite die Tabelle scrollbar werden soll. Die 500px ist hierbei nur ein Beispiel
- .post-content table/.postbody table --> alle Tabellen, die in einem Beitrag erstellt werden (sowohl klassische als auch mobile Version)
- width:100% !important --> zwingt die Tabelle, in ihrer vollen Breite zu bleiben
- word-break:normal --> Wörter werden nicht mittendrin geteilt, sondern nur an sinnvollen Punkten. Dadurch zwingen wir die Tabellen-Zellen auch eine gewisse Breite zu haben und sich nicht beliebig zu quetschen
- 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
Kyra- Geselle
- Beiträge : 72
Anmeldedatum : 03.08.16
Stephan68, pedxz und RafaelS. mögen diesen Beitrag
Ähnliche Themen
» [Tutorial - alle Versionen] Die Navigation fixieren
» [Tutorial - alle Versionen] Themenautoren auf der Moderationsseite
» [Tutorial - alle Versionen] Index-Module einzeln ein- und ausklappen
» [Tutorial - alle Versionen] Schritte zum Migrieren deines Forums zu HTTPS
» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
» [Tutorial - alle Versionen] Themenautoren auf der Moderationsseite
» [Tutorial - alle Versionen] Index-Module einzeln ein- und ausklappen
» [Tutorial - alle Versionen] Schritte zum Migrieren deines Forums zu HTTPS
» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten