Tabellen responsiv gestalten

Hallo an alle, 

ich habe das Design Faro ausgewählt und bin soweit zufrieden. Nun habe ich bei allen Seiten zusätzlich noch Umleiten auf Smartphone plaziert.

Nun mein Problem:

Auf dem Handy und dem iPad gehen die Tabellen aus dem Fenster. Das heisst sie passen sich nicht dem Bildschirm für Handy und iPad an.

Was muss ich da machen, dass die Seiten sich anpassen? Vor allem wenn ich Tabellen habe?

Vielen Dank für die Hilfe.

Daniel Hensch

... da gibt es verschiedene Möglichkeiten:

https://blog.kulturbanause.de/2012/06/tabellen-im-responsive-webdesign/

... auch javascript-Lösungen:

http://fooplugins.com/footable-demos/

http://maddesigns.de/responsive-tables-2393.html

Bye

oder vielleicht hat jemand eine Idee wie ich diese Tabelle auf http://www.choma.ch/ok-team/index.html

ohne Tabelle hinkriege, damit auch abstände bestehen bleiben.

Ich würde mir da ehrlich gesagt keine Gedanken drum machen. Denn wer besucht Websites wie Deine (und meine sowie andere) wirklich produktiv mit dem Smartphone, um diese intensiv zu lesen/studieren und beschwert sich dann über zu breite Tabellen? Wenn Du mich fragst... - kein Mensch.

Falls Du Dir trotzdem Gedanken machst:

Abhilfe schaffen kannst Du da effektiv nur mit einem responsiven Design. Unsere Forum-Team Mitglieder Conny, Jürgen und Thomas haben solche responsiven w2d/Siquando Designs in ihrem Portfolio. Schau' sie Dir einfach mal an.

Ja, ich mache mir Gedanken und würde gerne die Team Mitglieder kontaktieren.

HIER kannst Du mal prüfen, wie sich responsive Tabellen verhalten. Bei zu kleinen Bildschirmbreiten wird übrigens automatisch ein vertikaler Scrollbalken erzeugt.

(Basiert auf Bootstrap 3 von Thomas, Pro-Version.)

Bei Tabellen würde ich im ersten Schritt immer versuchen so wenig Spalten wie möglich einzufügen. Warum legst du nicht beispielsweiese Name und Vorname zusammen. Die Spalten werden ja immer mindestens so breit, wie das längste Wort, das sich darin findet.

Eine Spalte ist hier immer flexibler. In der ersten Tabelle kann bei Platzmangel ein Umbruch hinter dem Vornamen gemacht werden. Bei der zweiten nicht, die muss immer so breit bleiben.

Hier ein Beispiel einer optimierten Smartphone-Version. Bei kleineren Breiten als 768px werden die Tabellenzellen mit einer Breite von 100% angezeigt.