Thread Verfasser: Catzenjaeger
Thread ID: 1044
Thread Info
Es gibt 4 Beiträge zu diesem Thema, und es wurde 3920 Mal angesehen.  Ausserdem wurden Dateien angehängt.
 Thema drucken
Bootstrap Tabellen Design
Catzenjaeger
Ich beschäftige mich jetzt intensiv damit und baue noch immer an meiner Datenbank. Sie ist nun so gut wie fertig aber ich will noch paar Sachen mehr nutzerfreundlich machen

Ich hatte zuerst eine Tabelle mit 4 Spalten nebeneinander wo ich entsprechend Daten eingeblendet habe.

Aber am PC sah das gut aus aber auf den Tablet und Smartphone nicht da war alles verschoben. Jetzt habe ich das so gemacht , dass ich nur 2 Spalten habe (eine zeigt die Beschreibung das andere die Daten) und das sieht soweit ok aus. Auch das Problem mit Zeilenumbruch konnte ich lösen ... hoffe ich doch ... falls jemand ellenlange Wörter postet und die das Layout zerstören würden weil sie seitlich überlaufen.

Aber ich wollte mal so fragen . Das sieht am PC jetzt nicht mehr so schön kompakt aus wie vorher mit 4 Spalten .

Gäbe es eine Lösung das so zu machen das Tabellen automatisch umbrechen je nach Auflösung ?
Heißt, am PC 4 Spalten aber auf Smartphone nur 2

Im Anhang mal ein Bild wie es am PC aussieht momentan. Ich habe aber einige User die nur mit Smartphone darauf zugreifen und würde das wie gesagt für alle so schön wie möglich machen

habe schon gedacht einfach 2 Buttons mit Auswahlmöglichkeit einzubauen .. einmal Kompaktansicht (4 spalten) einmal die 2spaltige Version

wie würdet ihr das lösen oder habt ihr Ideen, Vorschläge .. was auch immer :)
Catzenjaeger hat folgende Datei angehängt:
Du hast nicht die Berechtigung die Anhäge dieses Themas zu sehen.
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Janilein
Vielleicht hilft dir das hier etwas weiter: https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten

oder aber dieses hier:
http://maddesigns.de/responsive-tables-2393.html
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
David
Weitere Möglichkeiten wären noch:

1.) Das Grid-System von Bootstrap nützen und auf DIVs umstellen (col-lg, col-md, col-sm, col-xs).
2.) Eine 4 Spaltige Tabelle erstellen welche nur sichtbar ist auf "lg" und "md", und eine 2 Spaltige Tabelle welche nur auf "sm" und "xs" sichtbar ist.
Liebe Grüße, David Smile

PHP-Fusion Österreich
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Catzenjaeger
Habe es umgesetzt. Die Figuren werden jetzt ohne jegliche Tabellen angezeigt. Wenn es mal verstanden hat einen feine Sache. Allerdings vermisse ich paar Dinge wie zB das Zebramuster was ich nun nicht mehr umsetzen kann weil es das nur für Tabellen gibt.

Danke euch beiden für eure Antwort
Bearbeitet von Catzenjaeger am 13. August 2016 18:14:21
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Springe ins Forum: