firebb: Tabelle Responsiv

Hallo!

Ich würde gerne eine Tabelle mit HTML/CSS erstellen welche sich ab einer gewissen Bildschirmauflösung anpasst.

Die Tabelle besteht aus 2 Spalten und diese würde ich dann gerne untereinander anordnen lassen.

Leider habe ich habe noch nicht so viel Ahnung wie man die Spalten ab einer bestimmten Breite dann untereinander anordnen kann.

Könnt Ihr mir dabei vielleicht weiterhelfen?

Liebe Grüße
firebb

  1. @@firebb:

    nuqneH

    Leider habe ich habe noch nicht so viel Ahnung wie man die Spalten ab einer bestimmten Breite dann untereinander anordnen kann.

    Beispiel | Erklärung

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Mahlzeit,

    Könnt Ihr mir dabei vielleicht weiterhelfen?

    Bei einer Tabelle geht das nicht. Entweder hat sie zwei reihen oder zwei spalten. Wenn du das wechseln willst, musst du z.B. per Javascript den DOM umbauen oder du nimmst andere Elemente. Bist du sicher, dass du tabelarische Daten hast weil du eine Tabelle benutzt oder nutzt du die Tabelle als gestaltungsmittel?

    --
    42
    1. Meine Herren!

      Bei einer Tabelle geht das nicht. Entweder hat sie zwei reihen oder zwei spalten. Wenn du das wechseln willst, musst du z.B. per Javascript den DOM umbauen oder du nimmst andere Elemente.

      Gunnar Tabellenp-Guru Bittersmann zeigt wie es geht.
      Die Physiognomik einer Tabelle (das HTML-Skelett) ist nicht an das CSS-Layout-Model (display: table-*) gebunden.

      Aufgrund der zeitlichen Nähe eurer Antworten, nehme ich an, dass du Gunnars Antwort einfach noch nicht lesen konntest.

      --
      “All right, then, I'll go to hell.” – Huck Finn
      1. Mahlzeit,

        Aufgrund der zeitlichen Nähe eurer Antworten, nehme ich an, dass du Gunnars Antwort einfach noch nicht lesen konntest.

        Das hast du richtig erkannt ;)

        --
        42
    2. @@M.:

      nuqneH

      Bei einer Tabelle geht das nicht.

      Natürlich geht das.

      Genauso, wie man andere Elemente mit der display-Eigenschaft auf "table", "table-row", "table-cell" gesetzt visuell zu einer Tabelle machen kann, kann man die display-Eigenschaft auf table, thead, tfoot, tbody, tr, td, th anwenden und auf "block", "inline-block", "inline" etc. setzen.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    3. Hi!

      Bist du sicher, dass du tabelarische Daten hast weil du eine Tabelle benutzt oder nutzt du die Tabelle als gestaltungsmittel?

      Naja, ich möchte eigentlich in der Linken Spalte ein Bild einer Person einbinden und in der jeweiligen Rechten Spalte eine Beschreibung (Name, Wohnort usw.) und diese sollte halt bei Handy's oder Tablets auch noch relativ lesbar dargestellt werden.

      Und da hab ich mir halt gedacht, dass es am einfachsten mit einer Tabelle geht bei der sich dann die Spalten untereinander schieben.

      L.G.
      firebb

      1. Mahlzeit,

        Naja, ich möchte eigentlich in der Linken Spalte ein Bild einer Person einbinden und in der jeweiligen Rechten Spalte eine Beschreibung (Name, Wohnort usw.) und diese sollte halt bei Handy's oder Tablets auch noch relativ lesbar dargestellt werden.

        Und genau dafür ist ja eine Tabelle nicht gedacht. MrMurphy hat bereits geschrieben was Sinn macht

        --
        42
  3. Ich würde gerne eine Tabelle mit HTML/CSS erstellen welche sich ab einer gewissen Bildschirmauflösung anpasst.

    Die Tabelle besteht aus 2 Spalten und diese würde ich dann gerne untereinander anordnen lassen.

    Ein schlichte Version hab ich mir gestrickt: Jede Tabellenzeile ist eine Liste; die Listenelemente stehen je nach Platz neben- oder untereinander, schaust du hier (Testversion).

    Gruß H.

  4. Hallo,

    um ein Bild (oder auch Video und anderes) mit einer Erklärung zu versehen ist das figure- mit dem figcaption-Element erste Wahl.

    Leider sind in der Beschreibung durch das figcaption-Element Grenzen gesetzt.

    Da du zu jedem Bild mehrere Informationen (Name, Wohnort u.a.) angeben willst ist das dl-Element mit seinen dt- und dd-Elementen die sinnvollste und auch semantisch passenste Lösung.

    Gruss

    MrMurphy