Wie bekomme ich Tabellen responsiv?

[cris]

Nutze Vorlage easyimmo. In der Detailansicht können Eigenschaften einer Immobilie angegeben werden. Default sind 2 Spalten, ich habe auf eine dritte erweitert (herabsetzen Spaltenbreite und einfügen einer dritten) Auf Telefon und Tablets wird die dritte Spalte abgeschnitten, es scheint so, als ob die Tabellen nicht responisv wären.
Mache ich etwas falsch bzw. gibt es eine Lösung für diesen Fall?
Danke!

[Tom]

Wenn es der selbe Aufbau wie in der Demo EasyImmo ist, dann sind es 2 bzw. jetzt 3 Inhaltselemente vom Typ Tabellen. Damit diese nebeneinander dargestellt werden wird AutoGrid verwendet. AutoGrid stellt in der mobilen Version immer alle Inhalte per Default untereinander dar. Die Tabellen müssten also untereinander stehen. Es dürfte also nichts mit den Tabellen zu tun haben. Mal prüfen ob AutoGrid korrekt im Einsatz ist. Sonst mal bitte einen Link posten.

[cris]

Hab die Logins per PN geschickt! Danke!!

[Tom]

Ich habe beim ersten Eintrag mal eine 3. Tabelle angelegt.

[cris]

Hmm, der Punkt um den es mir geht ist dass die Tabellen per se nicht responsiv sind also im Browser anstelle eines Zeilenumbruches Text abschneiden bzw. Scrollbalken einblenden (fixe Minimumbreite?). Kann man das umstellen?

[Tom]

Die Tabellen verfolgen den responsive Ansatz der horizontalen Scrollbars, sollte der verfügbare Platz nicht ausreichend sein.

Dies lässt sich mit folgendem CSS-Code deaktivieren:

.ce_table.overflow {overflow:hidden;}
.ce_table table {white-space: normal;}

[cris]

Wäre es möglich, dass sie die Tabellen so verhalten wie die Punkteliste unterhalb? Also, sie einfach untereinander angezeigt werden, sobald der Inhalt nicht mehr vollständig ohne scrollen dargestellt werden kann?

[Tom]

Man könnte die Tabellenfelder generell auf Mobile umbrechen lassen. Das würde in dem Bsp. funktionierten, da die Tabelle nur 2 Spalten aufweist.

Folgenden Code dazu in die customize.css:

@media only screen and (max-width: 767px) {
.ce_table table td,
.ce_table table th {display: block;}
.ce_table table td {padding: 25px 0;}
}

Eine Abfrage wann die Breite nicht mehr ausreicht... ist per CSS nicht möglich.

Schöne Grüße
Tom