Responsive Tabelle - Problem mit Hintergrund beim horizontalem Scrollen

  • Schönen guten Tag zusammen,


    ich bin gerade etwas ratlos, was eine vernünftige responsive Tabelle angeht.


    Da mir nichts besseres einfällt, habe ich es aktuell erstmal so gemacht, dass die Breite einer Tabellenzelle min. 100px beträgt und dann ab 860px die Möglichkeit besteht, wenn es nicht mehr passt, horizontal zu scrollen.


    Das Problem dabei: Der Hintergrund wird abgeschnitten und die Elemente, die erst durchs Scrollen erreichbar sind, haben dementsprechend keinen, was ziemlich unzufriedenstellend ist.


    Hat jemand eine Idee, wie man das beheben kann bzw. habt ihr generell eine bessere Idee, wie ich die Tabelle möglichst responsive gestalten kann?


    Bin für alles offen, solange sie eine gewisse Dynamik erlauben und man nicht je nach Content das CSS ändern muss.


    Schon mal vielen Dank im Voraus! :)


    Hier ist der Code: https://codepen.io/jr-cologne/pen/QMOwLR


    Gruß

    JR Cologne

  • Hier mal ein CSS Beispiel. Ist aber wohl nicht gerne gesehen.

    [code]

  • Auf jeden Fall vielen Dank für die Mühe, aber das ist leider nicht das, wonach ich gesucht habe. Grund: Die Bedingung Dynamik ist nicht gegeben, da der Content teilweise auch im CSS angegeben werden muss. Genau diesen Ansatz habe ich selber auch schon mal genutzt, aber leider geht das halt jetzt nicht...

  • Mir geht es nicht darum, dass das HTML oder CSS nicht geändert wird, sondern einfach nur, dass sich das Ganze an den Content anpasst und ich nicht je nachdem, ob ich jetzt z.B. vier oder 8 Spalten habe, immer etwas im CSS anpassen muss.


    Des Weiteren sind solche Lösungen, die den Content halt eben teilweise auch im CSS voraussetzen, wie z.B. das Beispiel von djheke keine Option.


    Um die Hintergründe nochmal etwas genauer zu erklären:


    Die Tabelle soll für den Einsatz in einem Datei-basiertem CMS sein. Ich fasse das HTML also ohnehin jedes Mal an, sodass HTML-Änderungen für einzelne Tabellen kein Problem wären, nur das CSS sollte halt nicht mehr für jede Tabelle geändert werden müssen.


    Im Vordergrund steht allerdings bei mir sowieso die Frage, wie ich das Problem mit dem Hintergrund beheben kann. Das wäre dann nämlich zumindest schon mal eine Lösung, die man so akzeptieren könnte. Horizontales Scrollen ist zwar nicht ideal, aber bei anderen Dingen, wie z.B. Code-Blöcken, muss ich das sowieso einsetzen. Von daher...

  • Hallo


    Was du dir vorstellst geht mit HTML und CSS schlicht nicht.


    Zum einen hast du das Responsive Layout noch nicht verstanden.


    Zum anderen sind grade Tabellen von allen HTML-Elementen die am wenigsten responsiven.


    Selbst wer Responsive Layout verstanden hat wird mit Tabellen deshalb immer Probleme haben, grade was das seitliche Scrollen / Nichtscrollen angeht.


    Wenn die Hintergründe durchgehend sein sollen musst du in deinem CSS entweder Flexbox rausschmeißen oder den einzelnen Zellen die Hintergrundfarben zuweisen.


    Ein CSS für alle Tabellen geht nur mit PHP und / oder JavaScript. Wobei dann auch die Nachteile von JavaScript akzeptiert werden müssen.


    Gruss


    MrMurphy

  • Zum einen hast du das Responsive Layout noch nicht verstanden.

    Warum? Was habe ich deiner Meinung noch nicht daran verstanden?


    Zum anderen sind grade Tabellen von allen HTML-Elementen die am

    wenigsten responsiven.

    Das ist mir durchaus bewusst, allerdings kann ich deswegen ja auch schlecht auf Tabellen verzichten.


    Wenn die Hintergründe durchgehend sein sollen musst du in deinem CSS entweder Flexbox rausschmeißen oder den einzelnen Zellen die Hintergrundfarben zuweisen.


    Ok, gut. Dann werde ich definitiv den Zellen die Hintergrundfarbe geben.

    Danke für den Tipp.


    Bin dann, wie gesagt, auch erstmal zufrieden mit der Situation. So viele Tabellen werde ich ohnehin nicht einsetzen.

  • Zur Not, würde es auch so gehen, wenn Du Änderungen am HTML vornehmen kannst/möchtest, aber keine am CSS.

    Wobei es mit PHP vielleicht einfacher wäre.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!