Position Sticky bei Tabellen

  • Hallo,

    ich bin gerade am Erstellen einer Webseite.

    Folgendes Problem:

    Ich möchte gerne eine Tabelle, die einen gewissen Abstand nach oben hat. Beim Scrollen soll dann nicht nur der Header sondern die ganze Tabelle "mitgehen". Leider bekomme ich dies nicht hin. Bei mir ist es immer so, dass sich dann alle Zeilen untereinander schieben und nicht die komplette Tabelle "mitgeht" sondern eben immer nur eine Zeile.


    Ich habe euch mal eine Beispieltabelle erstellt.


  • Kannst du mal ein Codepen erstellen, wo man das Problem sehen kann?

    Wenn ich deinen Code so kopiere, sehe ich eine Tabelle wo man auch nichts scrollen kann.


    Wenn ich deine Tabelle verlängere, sodass sie größer als der sichtbare Bereich ist und dann den Body scrolle ist alles ok.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=398

    Deshalb zeige uns mal was du genau meinst und wo man das Problem auch sehen kann.


    Dein Inline-style solltest du lieber in der CSS schreiben,

    von

    Code
    <table class="tg" style="table-layout: fixed; width: 285px">

    nach

    Code
    <style>
    table{
        table-layout: fixed;
        width: 285px;
    }
    </style>
    <table class="tg">
  • Hi Basti,


    klar habe ich das im css stehen habe nur alles gemeinsam kopiert.

    Ich habe dir jetzt das Problem einmal erstellt:




    https://codepen.io/Razon5889/pen/zYxdJKB


    Wie du siehst bleibt der Header stehen, das soll er auch. Aber die anderen Zeilen schiebt es unter den Header. Ich möchte aber, dass sie stehen bleiben und die Tabelle als ganzes ab dem bestimmten Punkt (wie jetzt nur der Header) stehen bleibt.

  • Keine ahnung was du meinst.

    Für mich höhrt es sich so an als wenn du eine normale Tabelle meinst ohne irgendwas.

    Lösch aus deinen Code mal das

    Code
    position: sticky; top:0

    dann kommt das raus was ich gerade verstehe.

    Wenn das auch nicht richtig ist dann such mal ein Beispiel raus oder warte bis einer antwortet der gerade nicht so doof ist wie ich ich

  • Hey,

    ich weis nicht ob ich es richtig verstanden habe. Ich habe auch ein wenig herum experimentiert. Habe deinen Code etwas aufgeräumt und deine angaben so belassen (weis nicht was du genau möchtest). Ich habe eine fixe höhe für body gewählt um einen scroll zu erzingen (test halber).


    Und bei .tg habe ich einfach position: fixed reingeschrieben. Denke sowas möchtest du haben?!? Denk Code könnte ma sicher noch verbessern, aber da fehlt mir noch die erfahrung, maybe basti1012 könnte mal drüber schauen und verbessern.


    Razon5889 zum nachschlagen: https://wiki.selfhtml.org/wiki…Tabellen/Zellen_verbinden (habe auch was neues gelernt :D )


    Vorschlag: https://codepen.io/Noobie_Chan/pen/YzPYqOJ


    lg. Noobie

Jetzt mitmachen!

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