Fixed Table Headers -- Problem mit Tabellen, die breiter sind, wie das Browserfenster..

  • Hallo Zusammen,


    ich habe ein Problem mit Tabellen... ich generiere Tabellen aus der Datenbank ( mittels php --> ist aber für die Frage eigentlich nicht relevant ) und möchte den Tabellenkörper scrollbar gestalten, während der Tabellenkopf stehen bleibt.

    Das funktioniert auch soweit ganz gut ( ich korrigiere die Spaltenbreite mittels Javascript ), bis zu dem Moment, in dem die Tabelle an sich breiter werden würde, wie der sichtbare Bereich im Browser. Anstatt mir die gesetzte Spaltenbreite beizubehalten "zerschießt" es mir mein layout und die Tabelle wird auf brechen und biegen komplett dargestellt - somit passen leider Spaltenköpfe und Inhalte nicht mehr zusammen.


    Da ich relativ "neu" bin mit html / css hoffe ich, dass es hier einen einfachen trick gibt und ich ihn nur nicht finde.

    Ich habe schon versucht das ganze mit flex-shrink: 0; zu unterbinden ( siehe code ), das hat aber leider gar nicht geholfen ( bin mir auch nicht so sicher, ob das der richtige Ansatz ist.


    Ich hab euch mal eine Beispielseite zusammengebastelt, auf welcher sich das Verhalten super beobachten lässt.


    Oben befinden sich eine kleine Tabelle, die im Chrome "perfekt" dargestellt wird, im Firefox leider auch die nicht ( falls mir da jemand einen tipp hat -- immer her damit :) )

    Unten steht ein größere Tabelle, bei welcher die Spaltenbreiten nicht mehr stimmen.


    Wenn ich die "Untersuchen" Funktion vom Browser verwende steht der korrekte width wert zwar als verwendeter wert da, es wird nur nicht so dargestellt :(


    auch gut beobachten lässt sich das ganze ( zumindest unter chrome ) beim zoomen. sobald die Tabelle über den sichtbaren bereich heraus gehen würde passiert auch bei der kleinen Tabelle dasselbe.


    Das ganze ist echt zum Mäuse melken, ich bekomme es einfach nicht hin das abzustellen. Ziel ist es, dass einfach die Tabelle aus dem Bild wandert und dann eben per scrollbar weiter bedient werden kann.


    Die Testseite inkl js und css findet ihr als Datei im Anhang ( 400 Zeilen sind vermutlich etwas zuuu viel um die direkt in den Beitrag zu kopieren )


    Vielen vielen lieben Dank schonmal <3#


    PS, Ich hoff der Beitrag ist so io, wenn nicht bitte Bescheid geben :)


    edit: ab einer bestimmten größe wandert die tabelle teilweise aus dem bild, es bleiben aber immer noch unterschiedlich breite felder :(