responsive Tabellen per CSS

  • Hallo zusammen,

    seit einiger Zeit bin ich auf der Suche nach einer "guten Lösung" um Tabellen responsive zu gestalten. (Ja ich weiß, Tabellen sollten am Besten komplett vermieden werden, aber manchmal geht dies leider nicht.)


    Hier gibt es die unterschiedlichsten Lösungsansätze (Spaltengrößen mit Breakpoints anpassen, mit/ohne Scrollbar, etc...), diese sind alle nicht sehr befriedigend. Ich bin jetzt auf den folgenden Ansatz (siehe CSS und HTML unten) gestoßen und finde diesen recht gut.


    Wenn hier das Fenster zu klein wird, dann werden die <thead> ausgeblendet und durch ein Pseudoelement per "::before" ersetzt. Die Tabelle wird dann umstrukturiert.


    Hier habe ich leider nur ein Problem, ich kann die Höhe des Pseudo-Elements "td::before" nicht automatisch an die jeweilige Feldhöhe anpassen. In diesem Beispiel wirkt sich das so aus, dass die graue Hinterlegung von "td::before" nicht bis zum unteren Ende der Spalte geht, sobald hier eine Zelle über mehrere Zeilen groß ist. (Objekt 2, Attribut 2 und Attribut 3).


    Kann mir hier jemand von euch helfen, oder hat Denkanstöße/ Schlagworte zum selbst googeln für mich?


    Vielen Dank schon mal im Voraus!

    Willy


  • Hallo basti 1012,

    vielen Dank für deine Antwort, aber der Link hilft mir leider nicht weiter.

    Ich habe mir dieses Art von CSS und HTML ausgesucht, weil es (ohne JS) am ehesten an meine Definition von Responsive herankommt.


    Ich habe das schon selbst gebastelt, bloß mein oben beschriebenes Problem bekomme ich nicht gelöst.


    Grüße

    Willy-digital

  • Etwas unkonventionell, das Ganze aber hat was :-)

    Zitat

    Ja ich weiß, Tabellen sollten am Besten komplett vermieden werden, aber manchmal geht dies leider nicht.

    Das ist ein Missverständnis, das man häufig antrifft. Es trifft zu, dass man vermeiden sollte, Tabellen für Layoutzwecke zu missbrauchen. Handelt es sich dagegen um die Darstellung von Daten, die von ihrer Struktur her tabellarisch sind, ist nichts dagegen einzuwenden.


    Man sollte jedoch etwas anderes vermeiden: Float, sofern es nicht tatsächlich um das Umfließen eines Elementes geht. Dafür, die Anordnung von Elementen zu steuern, sind Flex- und Gridlayout entwickelt worden. Ich habe das CSS in deiner Mediaquery mal auf Flex umgestellt und siehe da, es wird so dargestellt, wie gewünscht.