tabelle responsiv machen

• 

  nathaliesteidl · Mitglied · Dezember 27, 2014 at 10:50 am

  • Link kopieren
  • Thema zu Favoriten hinzufügen

  Hallo liebes Forum,

  ich möchte gerne eine Tabelle so einrichten, dass diese auf alle mobilen Geräten innerhalb der vorhergesehenen Theme-Fläche erscheint, also automatisch angepasst wird. Im Moment überlappt die Tabelle zum Beispiel bei Safari/Iphone in den grünen Hintergrund meiner Seite hinein. Alle anderen Elemente im Misty Lake Theme werden korrekt responsiv angezeigt, aber bei der Tabelle funktioniert es nicht.

  Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).

• 

  zodiac1978 · Mitglied · Dezember 27, 2014 at 10:52 pm

  • Link kopieren

  Du könntest der Tabelle folgendes CSS geben:
  display: inline-block;

  Und dem Tabellen-Body dieses CSS:

  .entry-content tbody {
      display: block;
      overflow-y: scroll;
  }

  Das ist eine sehr einfache Möglichkeit die Tabelle scrollen zu können und somit responsiv auch auf Smartphone-Größe nutzbar zu machen.

  Ist genug Platz da, verschwindet der Scrollbalken automatisch.

  Gruß, Torsten

• 

  nathaliesteidl · Mitglied · Januar 12, 2015 at 9:57 am

  • Link kopieren

  Vielen Dank. Wie macht man das genau?

• 

  zodiac1978 · Mitglied · Januar 12, 2015 at 12:25 pm

  • Link kopieren

  Steht doch da. Die Tabelle bekommt z.B. per Inline-CSS (also als zusätzliches Attribut style=“display: inline-block;“) oder du vergibst eine Klasse (class=“responsivetable“).

  Das CSS kommt dann in unter Design – Individuelles Design – Individuelles CSS.

  Gruß, Torsten