Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive Design für Tabellenzellen

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Responsive Design für Tabellenzellen

    Hallo Forum,

    ich habe eine PHP-Seite, die ich gerne so anpassen möchte, dass man sie auch mit einem Handy bequem abrufen kann. Leider ist der derzeitige Code nur mit Tabellenformatierung.
    Kann mir vielleicht jemand sagen, wie ich an das ganze am schlauesten rangehe? Ich habe mal einen Screenshot beigefügt, der zeigt, wie die Seite aufgebaut ist. Das ganze geht über 10 Übungen, die alle die gleiche Struktur haben; bis zu 21 Input-Felder pro Übung und einen Button zum sichern des Ergebnisses.
    Danke schon vorab

    http://fs5.directupload.net/images/161219/tcinc6cj.png

    LG Micha



  • #2
    CSS (= Darstellung im Client-Browser) hat nichts mit PHP (serverseitig) zu tun.

    [MOD: Verschoben von PHP-Einsteiger]
    PHP.de Wissenssammlung | Debugging: Finde DEINE Fehler selbst! | mysql_* ist veraltet! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__ | Kein Support per PN

    Kommentar


    • #3
      Die einfachste und schnellste Lösung wäre es einen Div-Container um jede Tabelle zu legen mit overflow-x:auto. Damit entseht auf kleinen Bildschirmen ein Scrollbalken für jede einzelne Tabelle (http://www.w3schools.com/howto/howto...responsive.asp).

      Falls du jedoch einen Scrollbalken vermeiden möchtest, könntest du es mit prozentualen width Angaben versuchen, was bei deinem Fall allerdings eher problematisch wirde, da die Tabellen sehr lang sind. Daher wäre es am Besten mit display:flex zu arbeiten (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).



      Kommentar


      • #4
        Ersteinmal du kannst es mit PHP realisieren. Wäre allerdings viel zu aufwendig. Für Responsive Design (Anzeige auf Mobil, Tabeltt, Monitor) gibt es clientseitig das Framework Bootstrap. Beispiele hierfür findest du ebenfalls bei w3schools.com

        Kommentar


        • #5
          Die Eingabefelder könnte man mit <div style="display: inline-block;"> als Kinder eines Elterncontainers realisieren. Wenn der Elternblock schmaler wird, rutschen die Eingabefelder in eine neue Zeile.

          Kommentar

          Lädt...
          X