Tabelle wird auf Mobile nicht richtig angezeigt

[Vapes4You]

Hallo zusammen,

aufgrund einer EU Verordnung müssen wir bei unseren Produkten einige Hinweise anzeigen.

Dies wurde über eine Tabelle gelöst. Allerdings wird die Tabelle auf der Mobilen Ansicht aufgrund des Inhalts total verschoben angezeigt und ich bekomme es nicht sauber gelöst.

Hat hier jemand eine Idee?

Ansicht auf dem Desktop:

Ansicht auf dem Handy:

[Gabe · Accepted solution]

Hey @Vapes4You 

Da du viele Information in dieser Tabelle anzeigen möchtest wird das schwierig sein so zu lösen und daher werde ich andere Optionen vorschlagen, wie z. B. unsere Apps, die das beispielsweise mit einem Lightbox Popup viel eleganter lösen auf Mobile. Siehe eine Demo hier.

Ansonsten, um deine Tabelle für mobile Geräte zu optimieren, kannst du auch weitere Ansätze Betracht ziehen:

• Verwendung beweglicher Tabellen: Diese Methode erlaubt es Benutzern, sich mit Wischgesten durch die Tabelle zu bewegen. Dabei bleibt die primäre Spalte fixiert, um den Kontext zu erhalten. Du kannst auch Farben für abwechselnde Reihen verwenden, um die Lesbarkeit zu verbessern. Allerdings ist diese Methode nicht ideal für Tabellen mit großen Datenmengen, da ein Großteil des Inhalts versteckt bleibt.
• Verkürzung von Tabellen: Bei dieser Methode werden unnötige Spalten ausgeblendet, sodass nur die wichtigsten Daten sichtbar sind. Ein "Mehr anzeigen"-Button kann hilfreich sein, um Zugang zu weiteren Daten zu ermöglichen.
• Umwandlung von Tabellen in Karten: Diese Technik klappt Tabellenzeilen zu separaten Karten zusammen. Es ist eine vielseitige Methode, um Informationen darzustellen, besonders bei Tabellen mit umfangreichen Daten. Es ist jedoch schwierig, bestimmte Daten zwischen den Zeilen zu vergleichen, es sei denn, du berücksichtigst die Hierarchie und betonst die wichtigsten Elemente.
• Anpassung der CSS-Eigenschaften: Du kannst CSS-Eigenschaften wie min-width, max-width und word-break verwenden, um die Breite der Spalten anzupassen und lange Wörter oder Links umzubrechen. Das hält die Tabelle innerhalb des vorgesehenen Bereichs und erleichtert das Lesen und Interpretieren der Daten.
• Überlegung, welche Informationen wirklich notwendig sind: Auf kleinen Bildschirmen solltest du nur die wesentlichen Informationen anzeigen. Große Tabellen sind unhandlich und schwer zu verwenden. Du könntest redundante Elemente oder Informationen eliminieren und nur die wichtigsten Daten präsentieren.

Diese Methoden helfen, deine Tabelle auf mobilen Geräten lesbarer und benutzerfreundlicher zu gestalten. Es ist wichtig, den spezifischen Kontext und den Zweck deiner Tabelle zu berücksichtigen, um die beste Lösung zu finden​​​​​​​​​​.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Finer]

@Vapes4You Tabellen sind tatsächlich immer problematisch. Wie bereits @Gabe erwähnt hat, muss man hier sämtliche Bedingungen genauer unter die Lupe nehmen, und prüfen, was ist relevant, und wie bekommt man das nachvollziehbar dargestellt.

In deinem Fall würde ich sogar zwei Tabellen erstellen. Eine für Desktop (entspricht der aktuellen Tabelle) und eine für die mobile Ansicht.

Bei der mobilen Ansicht würde nur ich dann lediglich eine Spalte verwenden und die Überschriften als Zeilen untereinander setzen:

Header 1

Inhalt 1

Header 2

Inhalt 2

Header 3

Inhalt 3

Um das ganz nicht zu lang zu gestalten, könnte man die einzelnen Inhaltsgrößen (Varianten?) vielleicht sogar in Tabs hinterlegen.

Manche Verordnungen definieren genau, wie eine Tabelle oder Kennzeichnung auszusehen hat. Ein "Responsive" Konzept liegt bei solcher Verordnung leider nie vor. Daher würde ich es empfehlen, die Informationen so darzustellen, dass ein Endverbraucher die Inhalte ohne Probleme lesen, genauer gesagt aufnehmen kann. Schließlich ist, dass ja das wichtigste, wenn man Verordnungen zu Produkt- oder Gebrauchshinweisen einhalten möchte.

[Vapes4You]

Hallo @Gabe  und @Finer ,

vielen Dank für euren Input, das hilft mir schon sehr weiter.

Von allen Ideen halte ich deine @Finer tatsächlich am sinnvollsten, einfach aufgrund der Tatsache, dass die Tabelle immer sichtbar sein muss und nicht "versteckt" hinter einem Link, einer Karte oder einem scrollbaren Bereich liegt. Die Inhalte darf ich nicht kürzen oder ändern, das heißt der Inhalt ist fest.

Allerdings weiß ich nicht genau, wie das gelöst werden soll 🙂

Die Tabelle ist Teil der Produktbeschreibung. Kann man die Struktur auch in CSS ändern?

Hier ein extremes Beispiel:
https://vapes4you.de/products/sc-10ml-nikotin-shot?pr_prod_strat=pinned&pr_rec_id=e0fdd3609&pr_rec_p...

[Vapes4You]

Ich muss mich korrigieren 🙂

Die beste Lösung ist deine @Gabe und zwar die Darstellung die hier beschrieben wurde:
https://css-tricks.com/responsive-data-tables/

Vielen Dank!

[Gabe]

Super!

[Vapes4You]

Hier noch ein Screenshot der optimierten Tabelle auf der Mobilen Ansicht:

[Gabe]

Sieht super aus! 😉