Preistabelle responsive machen ...

Vielleicht hat ja einer einen Ansatz, wie ich das machen könnte. Einfache Tabellen sind ja kein Problem, aber das Gebilde da, das bekomme ich nicht gebacken bzw. weiß noch nicht mal wie es "anders" aussehen könnte.

[ATTACH=CONFIG]n106587[/ATTACH]

So, das ist noch eine der "einfacheren" Versionen, das geht auch noch komplexer, für Hotes und Pensionen. Und nicht überall, wo hier kein Text steht, ist immer leer. Bei anderen Modellen kann da dann was stehen. z.B. hier über 1. bis 7. Nacht. Da könnte darüber auch noch ein Hinweis sein.

Der HTML-Code ist zwar unleserlich, aber ich kopiere ihn mal mit rein:

<table id="season_10_6" class="color1"><tr><td class="color_line color_line_color1">&nbsp;</td><td colspan="2" class=""><b>Hauptsaison</b></td><td colspan="4" class="">Mindestaufenthalt 7 Nächte</td><td colspan="2" class="txt_jede_weitere color1">jede weitere</td><td class="txt_belegung color1">Belegung</td></tr><tr><td class="color_line color_line_color1">&nbsp;</td><td class="val_zeitraum">04.07. bis 27.08.</td><td style="width:50px;">&nbsp;</td><td style="width:60px;">&nbsp;</td><td colspan="4" class="color1 center txt_preis">Preis pro Nacht</td><td class="txt_person color1 right">Person</td><td class="txt_maximal color1">maximal</td></tr><tr><td class="color_line cont_bg">&nbsp;</td><td class="val_zeitraum borderfree cont_bg">&nbsp;</td><td colspan="2" class="val_staffelung">1. bis 7. Nacht</td><td class="val_preis">59,00 &euro;</td><td class="txt_fuer">für</td><td class="val_personen">2</td><td class="txt_pers">Pers.</td><td class="val_person">10,00 &euro;</td><td class="val_maximal">3 Pers.</td></tr><tr><td class="color_line cont_bg">&nbsp;</td><td class="val_zeitraum borderfree cont_bg">&nbsp;</td><td colspan="2" class="val_staffelung">8. bis 14. Nacht</td><td class="val_preis">53,00 &euro;</td><td class="txt_fuer">für</td><td class="val_personen">2</td><td class="txt_pers">Pers.</td><td class="val_person">10,00 &euro;</td><td class="val_maximal">3 Pers.</td></tr><tr><td class="color_line cont_bg">&nbsp;</td><td class="val_zeitraum borderfree cont_bg">&nbsp;</td><td colspan="2" class="val_staffelung">ab der 15. Nacht</td><td class="val_preis">46,00 &euro;</td><td class="txt_fuer">für</td><td class="val_personen">2</td><td class="txt_pers">Pers.</td><td class="val_person">10,00 &euro;</td><td class="val_maximal">3 Pers.</td></tr></table>

So, nur wie bekomme ich das Ding responsive? Ich schaffe das noch nicht mal ansatzweise, denn die einzelnen Zellen sind so klein berechnet, dass da keinerlei Spielraum mehr ist. Irgendwie brauche ich wohl eine andere Darstellung, nur welche? Die sollte aber vor allem sehr sehr kompakt sein (daher ist das jetzt auch alles so dicht und zusammengerückt), denn von den Tabellen kann es auch durchaus mal 10 oder 15 auf einer Seite geben und man soll ja nicht 5 Minuten scrollen müssen.

Hat einer eine Idee? Habe schon lange gesucht, aber alle Beispiele und Lösungsansätze sind für Tabellen, die viel viel einfacher aufgebaut sind.

Danke Chris, für den Link! Ist schon witzig. Ich bastel da ja dran rum und irgendwie funktioniert deren Tabelle ähnlich wie nun meine Hm, stellte mir vorhin nur eine Frage, wie ich variable Bezeichnungen "vor einen Text" bekomme, also "Nacht", "Woche" etc. Habe das dann mit drei css-Klassen gelöst. Aber, das "data-label="Anreise:"" von der Seite ist eleganter Das könnte auch mein Problem lösen, dass ich den "Mindestaufenthalt eigentlich wo anders haben will, aber da fand ich bisher noch keine Lösung. data-label könnte es ein.

Ich merke schon, ich bin veraltet. data-label nutze ich zwar schon sehr oft, aber irgendwie fällt mir das immer nicht spontan ein. Auch die ganzen Pseudo-Klassen nicht, mit denen es aber letztendlich funktioniert und nur mit denen Und, ich muss weiter umdenken. Bisher hatte ich display:none immer gemieden, aber genau das braucht es auch.

Die etwas kleinere Version schaut nun so aus:
[ATTACH=CONFIG]n106604[/ATTACH]
Das passt nun eigentlich für die meisten Zwischengrößen. Wenn ich diesen doofen Text "Preis pro Nacht" nun noch unten ausgrichtet bekomme, dann passt die Version, vertical-align mag er aber nicht

Und die kleine für 320px so:

[ATTACH=CONFIG]n106605[/ATTACH]
Das wird dann zwar ewig lang, aber irgendwo müssen die Daten ja hin. Das ist nun nur eine Saison. Einige Vermieter haben aber bis zu 20 Saisonzeiten

Wobei ich mich aber auch nicht zu früh freuen darf, der Teufel ist ein Eichhörnchen. Da sind noch die Hotels und Pensionen, die haben eine weitere Spalte mehr für "Einzelzimmer", "Doppelzimmer" usw.

Nee, nicht gemopst. Chris hatte mir nur einen Link geschickt, bei dem es fast genauso ist, allerdings war ich da auch schon so weit Die Tabelle von Chris war so eine, wie es normal ist, also einfach Zellen nebeneinander und eben Zeilen untereinander. Kein rowspan und colspan. Um die responsive zu bekommen, gibt es schon zig Anleitungen im Netz. Meine Tabelle ist aber anders, da spielen verschiedene Zeilen in Verbindung eine Rolle. z.b. das "jede weitere Person". Der Text steht in zwei Zellen, in unterschiedlichen Zeilen. Das würde es mit den Standardlösungen völlig zerreißen, da dann ein Teil oben steht, ein anderer weiter unten und dazwischen Text, der da gar nicht hin passt.

Das war auch mein Fehler bisher. Ich habe zu einfach gedacht, wobei es aber eigentlich einfach ist. Man muss nur mit display:inline-block in Kombination mit block arbeiten und darf sich nicht vor display:none scheuen. xxx:before{content:"irgendwas"} ist auch wichtig.

Bild 1 ist mein Original, so wie es normal ist.

Bild 2 ist leicht verändert. Da ist dann TD per default auf inline-block. Damit der Umbruch bei "4.7. bis 27.8." kommt steht diese Zelle auf "block" und "100% width". Hier wurden dann aber "jede weitere" und "Belegung" in die Quere kommen, denn die beiden Zellen (original Zeile 1) sortieren sich gänzlich falsch ein. Also einfach ein display:none drauf und weg sind sie. Die neue Beschriftung "weitere" und "Personen" kommt per xxx:before{content:"irgendwas"}

Bild 3 ist analog dazu. Hier brauchte es Umbrüche bei den Staffelungen, also den "1. bis 7. Nacht" etc. Also hier dann auch ein "block" drauf. Alle Beschriftungen, die vorher da waren, wurden komplett auf display:none gesetzte, denn hier passte keine mehr. Die dortigen "Preis pro Nacht", "weitere Person" und "Personen maximal" kommen komplett per CSS xxx:before{content:"irgendwas"}

Ansonsten halt hier und da noch ein paar padding rein und einzelne Zellen die vorher nur ein Leerzeichen hatten ebenso auf display:none, denn die erzeugten eine neue Zeile.

Wenn es bei Dir so weit ist, einfach einen Post zu aufmachen

Alex, es gibt keine fertige Lösung, zumindest nicht für meinen Fall, wenn ich meine Originaltabelle nicht ändern möchte.

Meine Webseite ist ja bekannt. Ersetzt einfach das www durch dev und schon seit ihr drauf. Aber bitte nichts abschicken, die ist vollständig funktionsfähig. Die Tabelle aus den Bildern ist hier zu finden http://dev.domain.de/unterkunft/3726/

Bin aber noch am ändern, also da ist noch nichts so, dass ich da eine Freigabe geben würde