WBCE CMS Forum

byteworker

Member

Tabelle responsive machen

Hallo Zusammen,

ich bräuchte einen Geistesblitz, ich hänge irgendwie fest. Eine Kundin möchte eine Seite mit Mietbedingungen zu Ihren Wohnwagen responsive haben. Die Tabelle ist alt, schon von der alten Webseite so übernommen worden. Ich habe mit einigen responsiven Scripten experimentiert, aber die verschachtelten Tabellen sind tricky.

Geht um diese Seite:

http://wohnmobile-kunz.ch/pages/vermietung.php

Jemand eine Idee, wie ich die Tabelle responsive machen kann und gleichzeitig etwas einfacher zum Bedienen für den Bearbeiter, es kommen immer mal neue Wohnmobile dazu mit anderen Texten.

Viele Grüße
Norbert

---

= Templates für WBCE

florian

Administrator

Re: Tabelle responsive machen

Ist die Darstellung fix, also muss die Tabelle genau so aussehen?
Sonst könnte man beispielsweise die Preise für Haupt- und Nebensaison jeweils in eine Tabellenzelle packen und farblich unterscheiden (grau/schwarz) o.ä., dann würde die Tabelle zumindest auch auf Tablets (1024x768) passen, weil dann die letzten 4 Spalten vor dem PDF-Link wegfallen.

Denkbar wäre auch, die Tabelle nicht als Tabelle, sondern als Divs mit einem CSS-Grid (z.B. Gridism) zu realisieren, dann wäre das selektive Ausblenden und anders Anordnen (untereinander) recht einfach zu bewerkstelligen.

Wenn Du (was initial nicht trivial ist) die Tabelle mit DataTables baust, hättest Du Paginierung, Filter-/Suchfunktionen und responsive Klassen.

Oder, auch noch denkbar: Die Tabelle auf Displays < 600 Pixel Breite ausblenden und statt dessen dort dann entweder Kontaktinformationen, oder nur zwei, drei ausgewählte Angebote in Listenform o.ä. anzeigen.

Zur einfacheren Pflege: Für Itemz sind das zu viele Felder, aber mit OneForAll ließe sich das umsetzen.

Last edited by florian (02.04.2019 15:12:06)

---

Wir Benötigen: Cents, Euros... jetzt spenden!

byteworker

Member

Re: Tabelle responsive machen

Danke Florian,
die Tabelle darf schon auch anders aussehen. Ja die beiden Wochenspalten kann ich mir auch gut untereinander vorstellen. Ich werde auch den rechten Text entfernen und die volle Contentbreite ausnutzen.

Ich werde das mit OneforAll versuchen, ich bin bisher noch nicht an das Modul gegangen, irgendwie hats mich gescheut.

Habe das hier gefunden, auch ein Weg zur Responsivität.
https://zurb.com/playground/responsive-tables

---

= Templates für WBCE

losttrip

Member

Re: Tabelle responsive machen

I researched this a few years ago.  I remember trying the Zurb approach (as I use Foundation on some sites), but it didn't work out.  Sorry, I can't remember what the issues were.

Here is another approach - https://blog.easy-designs.net/archives/ … ve-tables/

Anyway, best of luck.

grindbatzn

Guest

Re: Tabelle responsive machen

So wie das momentan aussieht, glaube ich nicht, dass es einen praktikablen Weg gibt, das responsiv hin zu bekommen.

Ich würde da eher hergehen und die gesamte Tabelle jeweils für große und kleine Geräte machen - also 2 komplette Tabellen.

Vielleicht ginge es auch, die Inneren Tabellen auf display:block zu stellen, also
table, td, td {display:block; }
Aber da bräuchte man wieder eine Extra-Beschriftung  (1 Woche, 2 Wochen...). Naja: Das bräuchte man bei jeder responsiven Lösung.

Alternativ: Die Tabelle seitlich zum Scrollen machen; da muss man aber drauf hinweisen.

byteworker

Member

Re: Tabelle responsive machen

Das mit seitlich scrollen werde ich noch mal testen, danke.
Ich überlege auch, ob man die Fahrzeugbilder nicht einfach über die Texte in eine Zeile packt, dann die Wochen und die Preise anders. Schriftgrößen kleiner usw.

Test, wobei ich da noch die ganzen Tabellenformate zerlegen muss. Da ist viel mit festen Breiten gemacht worden.

http://wohnmobile-kunz.ch/pages/test-mit-tabellen.php

Last edited by byteworker (03.04.2019 10:20:25)

---

= Templates für WBCE

florian

Administrator

Re: Tabelle responsive machen

So richtig warm werde ich mit der Tabelle nicht.
- Neben den CHF-Preisen ist eine feine graue Linie. Ist das Absicht?
- Ich finde es angenehmer, wenn vierstellige Preise mit Tausendertrennern geschrieben werden, also 1'390 oder 1.390,- o.ä.
- Da alle Preise in CHF sind, könnte man auf die Voranstellung des Währungskürzels verzichten und stattdessen eine Kopf- oder Fußzeile mit dem Vermerk "Alle Preise in CHF" einfügen. Eventuell auch noch, ob das Brutto-/oder Nettopreise sind (also ob das eidgenössische Äquivalent zur Mehrwert- bzw. Umsatzsteuer enthalten ist)
- Das Bild sollte unbedingt aus der Tabelle raus oder noch kleiner, um die Spaltenhöhen zu reduzieren. Es könnte ja als Tooltip/Lightbox bei der Fahrzeugbezeichnung hinterlegt werden.
- Sinnvoll wäre evtl. auch noch, eine weitere Spalte mit einer direkten Verlinkung zur Buchungsanfrage einzufügen, also
http://wohnmobile-kunz.ch/pages/vermiet … odell=Twin 600SP usw., da die Tabelle ja auf der Startseite mit "Mietwagen auswählen" verlinkt ist, in der aktuellen Darstellung aber streng betrachtet gar keine Auswahl möglich ist.

Ich hoffe, Du nimmst mir mein Genörgel nicht übel. Ansonsten ist der Auftritt nämlich sehr schick.

---

Wir Benötigen: Cents, Euros... jetzt spenden!

byteworker

Member

Re: Tabelle responsive machen

Florian, das sind die guten Ideen, danke dafür.
Ist alles richtig, sollte man alles so umsetzen. Die Preisschreibweise ist ein Punkt, an dem ich noch arbeite. Werde wohl farblich die Saison, Nebensaison Preise trennen und untereinander schreiben. Generell will ich die alten Styles aus der Tabelle entfernen und das Ding einfacher aufbauen.

Die direkte Buchungsanfrage wäre toll, ich habe allerdings noch keine Idee, wie ich das mit einer Anpassung im Miniform umsetzen kann. Dazu muss ich auch je Modell eine eigene Unterseite stricken, da dann noch die Details des Wohnmobils aufführen usw.

---

= Templates für WBCE

florian

Administrator

Re: Tabelle responsive machen

An Miniform kann das Modell per Parameter übergeben werden (siehe Beispiellink in meinem vorherigen Post).
Wenn es zu jedem WoMo eine Detailseite geben soll, wäre das noch ein Grund, das mit OneForAll umzusetzen.
Hier ist ein Beispiel (produktive Seite, bitte keine Testanfragen stellen), wie so etwas in etwa aussehen kann.

---

Wir Benötigen: Cents, Euros... jetzt spenden!

better-work

Member

Re: Tabelle responsive machen

@florian

Wow, eine direkte Anfrage mit bereits ausgefülltem Feld, das ist schon cool!
Gibt es dafür eine Anleitung?

---

Gruß Jörg

florian

Administrator

Re: Tabelle responsive machen

ist mit JS gemacht

<script>
document.getElementById('message').value="Ich interessiere mich für die Wohnung mit der ID [FIELD_1] ([FIELD_5], [FIELD_6] [FIELD_7], Etage: [FIELD_8]). Bitte nehmen Sie mit mir Kontakt auf.";
</script>

Auf der Seite ist ein OfA-Abschnitt und ein Miniform-Abschnitt, und in den Seiteneinstellungen von OfA (Detailansicht Fußzeile) wird das Formular per Javascript vorausgefüllt.

---

Wir Benötigen: Cents, Euros... jetzt spenden!

stvis

Member

Re: Tabelle responsive machen

... Diese Seite hat mir unlängst ganz gut dabei geholfen, die Tabellenbasierte bakery so halbwegs responsive zu bekommen. Vielleicht helfen Dir diese Tips weiter?
LG

byteworker

Member

Re: Tabelle responsive machen

Prima, danke. Ich werde schauen wie ich das umstelle. Aktuell habe ich einen Entwurf mit Unterseiten vorgestellt, schaun mer mal.

---

= Templates für WBCE

byteworker

Member

Re: Tabelle responsive machen

Kl. Nachtrag: Problem gelöst, die Inhalte sind auf mehrere Seiten verteilt.

http://wohnmobile-kunz.ch/pages/vermietung.php

---

= Templates für WBCE