CSS Scrollen innerhalb Tabelle?

[Dsimon24]

Hallo zusammen,

mit den folgenden Code kann ich eine Tabelle nach unten
scrollen, damit diese nicht komplett angezeigt werden muss.

        <div class="scrollbox" style="overflow:scroll; height:140px;">
          <table>
            <tr>
              <th style="background-color:red; color:white;">Str.</th>
              <th style="background-color:red; color:white;">Hnr.</th>
              <th style="background-color:red; color:white;">PLZ</th>
              <th style="background-color:red; color:white;">Ort</th>
            </tr>
            <tr>
              <td>Musterstraße</td>
              <td>2</td>
              <td>44444</td>
              <td>Hamburg</td>
            </tr>
            <tr>
              <td>Musterstraße</td>
              <td>2</td>
              <td>44444</td>
              <td>Hamburg</td>
            </tr>
            <tr>
              <td>Musterstraße</td>
              <td>2</td>
              <td>44444</td>
              <td>Hamburg</td>
            </tr>
          </table>
        </div>

Jetzt möchte ich aber, dass der Tabellen-Kopf nicht mit scrollt.
Setze ich das DIV darunter, wird gar nicht mehr gescrollt.
Habt ihr eine Idee, wie ich das lösen kann?

VG, David

 

[SaxnPaule]

https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

 

[mambokurt]

https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

Das klappt aber nur wenn man die Ths und Tds mit fester Breite ausgibt. Es gibt einen Trick bei dem man die Tabelle erstmal fertig rendern lässt und dann mit Javascript dem Kopf per onscroll nen Top-Wert mitgibt, der klappt auch mit den vom Browser ermittelten Spaltenbreiten.

https://codepen.io/jgx/pen/wiIGc

So in der Art, der Code den ich mal hatte war aber vanilla JS, wenn du den willst pm mich mal dann such ich ihn.