Hallo,
ich versuche mich aktuell an einer responsiven Produktliste.
Jeder Artikel bringt (mind.) folgende Daten mit:
- Produktbild
- Artikelnummer
- Produktbeschreibung
- Verfügbarkeit
- Herstellername
- Preis
Das natürlichste der HTML-Welt wäre es jetzt eine Tabelle zu nehmen und die ganzen Datensätze da rein zu flanken. Will man das Ganze jedoch responsiv und "mobile first" umsetzen steht man vor einem Problem. Und "man" bin im Moment ich.
Eine <table> bietet alle Vorteile zur Visualisierung dieser Art von Datensätzen, außerdem ist eine tabellarische Darstellungen auf einem "handelsüblichen Monitor" explizit erwünscht (Hier gehe ich von mindestens 960px in der Breite aus. Alles darunter muss nicht zwingend tabellarisch dargestellt werden.).
Eine Tabelle hat allerdings den riesen Nachteil, dass sie i.d.R. mind. so breit ist wie ihre Inhalte und auf kleineren Displays ist das natürlich ein Problem und mit horizontalem Scrollen verbunden.
Als Alternative zu einer <table> könnte ich natürlich eine Gruppe beliebiger Elemente nehmen ... z.B. verschachtelte Listen.
Der gravierende Nachteil wäre, dass die "Spalten" nicht "automatisch" vorhanden wären, sondern diese erst Mittels CSS (ggf. JS) geschaffen werden müssten.
Normalerweise würde ich mir hier von Seite des Servers unterschiedlichen Code liefern lassen, leider steht mir diese Option grade bei diesem Problem nicht zur Verfügung.
Wie geht ihr bei sowas vor bzw. wie würdet ihr das Problem lösen?
Danke & Gruß
Ole