div mit eigenem Scroll horizontal als Tabelle

  • Hallo zusammen,


    ich hänge schon wieder einmal fest, und finde die Lösung nicht.

    Ich möchte eine Übersicht mit diversen Angaben in einem div darstellen. Aussehen soll das Ganze im Endeffekt wie eine Tabelle, habe aber gelesen dass man table gar nicht mehr so nutzt?

    Mein Ziel wäre, die Daten in diesem div untereinander darzustellen, mit festem Kopf vertikal, da die Daten mehr werden als in dem unten angehangenem Beispiel, also auch nach unten zu scrollen sein werden. Das funktioniert logischerweise standartmäßig.


    Mein Problem ist nun, dass die Daten nur bis zum sichtbaren Ende des div´s laufen und dann in der nächsten Zeile weiter gehen.

    Das soll so nicht sein, sondern ich möchte nach rechts scrollen um den Rest zu sehen.


    Außerdem habe ich offensichtlich ein schlimmes Verständigungsproblem mit float:left, denn so wie ich es jetzt gemacht habe ist es natürlich totaler Käse, da die Daten ja hintereinander weiter laufen, was ja komplett unsinnig ist.


    Hier das Beispiel, stark vereinfacht, aber ich hoffe es reicht zur Erklärung was ich vor habe:

    Eigentlich soll nun quasi 'Bernd' als Überschrift stehen, und darunter die Daten.
    Super wäre es wenn die Zeilenbeschriftung ebenfalls fest stehen würde, also nur vertikal aber nicht horizontal scrollen würde, aber da würde ich auch erst einmal weiter selber versuchen etwas zu finden, bzw. dann ein neues Thema erstellen falls ich nicht fündig werde. ;)


    Habe auch schon alle Varianten versucht die ich so gefunden habe, allerdings bekomme ich es leider einfach nicht hin.


    Hoffe es ist verständlich und das Beispiel ausreichend, wenn nicht würde ich das auch noch einmal neu machen.


    Vielen Dank im Voraus, und sollte ich kompletten Mist versuchen, Asche auf mein Haupt, bin noch in der reinen Lernphase. :P

  • Zitat

    dass man table gar nicht mehr so nutzt?

    So pauschal sollte man das nicht sagen. Es trifft zu, dass man Tabellen besser nicht für Layoutzwecke verwenden sollte. Für die Darstellung von Daten, die tabellarischer Natur sind, ist nichts dagegen einzuwenden, Tabellen zu verwenden. Auf der einen Seite trifft das auf deine Daten zu, auf der anderen Seite auch wieder nicht, weil die Überschriften vertkal in der linken Spalte stehen statt horizontal im Kopf.

  • So pauschal sollte man das nicht sagen. Es trifft zu, dass man Tabellen besser nicht für Layoutzwecke verwenden sollte. Für die Darstellung von Daten, die tabellarischer Natur sind, ist nichts dagegen einzuwenden, Tabellen zu verwenden. Auf der einen Seite trifft das auf deine Daten zu, auf der anderen Seite auch wieder nicht, weil die Überschriften vertkal in der linken Spalte stehen statt horizontal im Kopf.

    Na gut, die reinen Daten könnte ich ja als Tabelle darstellen, aber ich fürchte das würde das Layout was mir vorschwebt nur noch erschweren, da dann ja weder Kopf noch die 'linke Spalte' fest zu hinterlegen wären. Zumindest nach meinem jetzigen Stand, aber ich lasse mich natürlich gerne eines besseren Belehren. ;)


    Habe die Variante mit den divs statt Tabelle (display:table-cell war da auch entscheidend) in einem anderen Teil der Seite an der ich sitze auch zufriedenstellend und logisch hin bekommen, umsomehr wurmt mich das gerade dass ich bei diesem Teil gerade sprichwörtlich wie das Schwein ins Uhrwerk schaue.

  • Ich habe ja auch nicht definitiv gesagt, dass eine Tabelle mehr zu empfehlen ist. Ich würde jedoch von float abraten. Außerdem ist es mir sympatischer, wenn die Daten, die zusammengehören, auch zusammenstehen. Auf diese Weise habe ich folgendes gemacht:

    Also mit Flexlayout. U. U. wäre Gridlayout besser gewesen, aber ich empfehle das nicht gern, weil es von IE11 nicht richtig unterstützt wird.

  • Außerdem ist es mir sympatischer, wenn die Daten, die zusammengehören, auch zusammenstehen.

    geht mir ja eigentlich auch so, da ich das Ganze aber über eine VBA Funktion fülle, war das der einfachere Weg die Daten so anzuordnen, aber ja, ist schon logischer, da werd ich die vba noch einmal abändern.


    Erst einmal vielen Dank Sempervivum, muss mal schauen ob ich am WE dazu komme es mir mal genau anzusehen, hatte nicht mit so viel Reaktion am Freitag Abend gerechnet. 😉


    Schönes Wochenende...

  • Sorry dass ich mich so spät melde, war leider etwas außer Gefecht gesetzt.

    Die Vorschläge das doch alles als Tabelle darzustellen war natürlich genau richtig, und mit position: Sticky habe ich dann auch genau das was ich haben wollte, also einen festen Header, und seitlich ebenfalls.

    Also alles noch einmal neu wo ich es mit div versucht habe. :(:D


    Also erst einmal ein ganz großes Dankeschön, man lernt ja nie aus, und hier wird einem immer wirklich gut geholfen!


    Eine Frage hätte ich noch, vielleicht kann mir da noch einmal jemand helfen, in der Hoffnung dass es nur eine Kleinigkeit ist:

    Der linke Teil ist jetzt wie gesagt fest, ebenso der Kopf. Soweit so gut, jetzt ist mir allerdings aufgefallen, dass der rechte Teil durchsichtig ist, was aber logischerweise nicht so schön aussieht, da die Daten dann mit der "Überschrift" rechts überlappen. Gibt es da einen kleinen Trick wie die Daten dann einfach hinter der Überschrift verschwinden? Beim Kopf ist das ja auch nicht so, daher verstehe ich gerade nicht wo da das Problem liegt.


    Hoffe verständlich, wenn nicht mache ich noch einmal ein neues Thema auf mit einem Beispiel...

  • Zitat

    dass der rechte Teil durchsichtig ist, was aber logischerweise nicht so schön aussieht, da die Daten dann mit der "Überschrift" rechts überlappen. Gibt es da einen kleinen Trick wie die Daten dann einfach hinter der Überschrift verschwinden? Beim Kopf ist das ja auch nicht so, daher verstehe ich gerade nicht wo da das Problem liegt.

    Was mich betrifft, so verstehe ich leider nicht, was Du meinst. Ist wahrscheinlich besser, wenn Du ein Beispiel postest. Gibt sicher eine einfache Lösung.

  • Ich denke, ein Link wäre praktisch

    Link ist leider nicht möglich da die Seite nur auf unserem Firmeneigenen Server läuft.

    Aber hier der Teil des Codes um den es geht, natürlich stark abgeändert. ;)



    Was mich jetzt halt noch stört ist, dass, wenn man horizontal oder vertikal scrollt die "Zelle" mit "erste" durchsichtig ist, die Schrift des jeweiligen Inhalts der daneben oder darunter stehenden Zelle mit dieser also vermischt, was ja nicht so wirklich schick ist.

  • google => css fixed table header and column => 2. Treffer => https://jsfiddle.net/RMarsh/bzuasLcz/3

    Hallo m.scatello,


    danke, aber festen Header/Column haben wir ja quasi gelöst, es geht ja "nur" noch um die Transparenz dieser Beiden beim Scroll in beide Richtungen.

    Als Umweg via js sicher machbar, würde ich aber gern vermeiden, da ich Zeilen mit unterschiedlich großen Inhalten habe, den festen Wert der Höhe also nicht so einfach angeben kann.

    Außerdem finde ich sieht das auch nicht wirklich schick aus, da die Zeilen ja trotzdem ineinander verlaufen. Kleines Übel, klar, aber ich kann mir nicht vorstellen dass das die einzige Möglichkeit sein soll wie man das realisieren kann.

  • Du brauchst nur den betr. Zellen eine Hintergrundfarbe zu geben, dann verschwinden die gescrollten dahinter:


    Wollte ich auch gerade schreiben. ^^


    Allerdings funktioniert das nur horizontal, beim vertikalen Scrollen wird trotzdem die Überschrift (im Beispiel "erste") von dem darunter stehenden "Fest" überschrieben, auch wenn ich die Farbe ändere. Der Körper scheint also eine Instanz über der Überschrift zu stehen...

  • Dafür gibt es sicher auch eine Lösung, aber in meiner Testdatei ist die Kopfzeile nicht fixiert, sie verschwindet nach oben beim vertikalen Scrollen?

    Du meinst in der?

    Da ist doch beides mit position:sticky fixiert, DepotKopf als Überschrift oben, DepotRel als seitliche Orientierung.

    Aber ich sehe gerade, läuft zwar unter Firefox, aber nicht in IE und EDGE (andere Browser zum Testen habe ich gerade nicht). Das ist natürlich schon wieder unschön...

  • ... im Opera funktioniert die Fixierung, wenn ich es auf th anwende, und mit z-index bleibt die linke obere Zelle auch sichtbar:

  • Und wenn du google wirklich mal bemüht hättest und dir weitere Treffer angesehen hättest, hättest du perfekte Lösungen finden können.

    Da wir im Laufe des Themas ja aber schon eine funktionierende (und schönere) Lösung gefunden hatten, wollte ich jetzt nicht einfach wieder bei null anfangen, sondern lieber an den Feinheiten arbeiten. Ich hätte mir das noch einmal genauer angeschaut, allein des Verstehens wegen.

    Aber da die einfache Variante ja anscheinend nur bei Firefox zu funktionieren scheint werde ich das jetzt wohl doch früher einmal vertiefen müssen.


    ... im Opera funktioniert die Fixierung, wenn ich es auf th anwende, und mit z-index bleibt die linke obere Zelle auch sichtbar:

    So funktioniert es auch im Firefox, aber dem IE ist auch das egal (wobei ich nicht denke dass das jemals wer mit IE ansieht). ^^


    Ok, ich werde das dann mal für Firefox schick machen, und wenn ich keinen Zeitdruck mehr habe kann ich ja schauen wie ich es auf anderen Browsern ebenfalls

    adäquathin dargestellt bekomme. Ist schon sehr praktisch dass einfach jeder Browser anders reagiert. :(


    Ich danke euch auf jeden Fall erneut für die Hilfe und die verschiedenen Ansätze!!!