Fixed Table Headers

  • Hallo Zusammen,


    ich hab eine HTML Tabelle die dynamisch aus einer SQL - Datenbank befüllt wird. Die Überschriften der Spalten richten sich nach der Breite der Inhalte, sind also je nach Benutzerauswahl und geladener Tabelle unterschiedlich. Die Anforderung besteht nun, dass die Headers beim runterscrollen fixiert bleiben. Ich hab dazu schon einige Tutorials gefunden, jedoch stehen dort in jeder Zelle immer feste Werte. Bei den Tutorials wird über div Elemente, getrennte Tabels für Überschriften und Content, oder über thead und tbody die Tabelle eigentlich aufgetrennt um so mit CSS den Überschriften andere "Verhaltensweisen" zuzuordnen. Hab auch bei w3 Schools schon was gefunden, das das mit Javascript regeln soll, aber auch hier sind feste Werte in den Tabellenzellen und Überschriften und somit wird auch dort den Bereichen einfach feste Höhen und Breiten zugewiesen, mit denen es dann einfach ist den Headbereich zu fixieren. Weiß einer ob es in meinem Fall überhaupt möglich ist, das zu realisieren wenn ich Header und Content nicht trennen kann, da sich Header und Content nacheinander richten müssen und auch die Überschriften eine dynamische Länge haben können weil manchmal eben an einer Stelle eine andere Überschrift steht? Alle Beispiele und Guides die ich gefunden hab, arbeiten nämlich mit festen Größen. Das ist bei mir überhaupt nicht möglich.


    Danke für eure Meinung

  • Realisieren kann man das bestimmt. Ich würde spontan datatables empfehlen:

    https://datatables.net

    Normaler Weise sollte es möglich sein, die Initialisierung bei jeder neuen Generierung neu durchzuführen, so dass sich das Ganze an die neue Struktur einschl. Breiten der Header-Element anpasst.

    .

  • Danke die Seite hat mir echt geholfen. Da ich aber kein Profi bin hab ichs nicht geschafft, das Skript von dort so auseinanderzunehmen und die einzelnen Funktionen korrekt rauszufiltern.



    Falls es noch jemand braucht, das Video hat mir geholfen und erfüllt genau die eine Funktion. Danke für eure Hilfe