Wie kann ich Sticky-Table-Header innerhalb eines Scrolling-Divs erstellen?

Sticky-Positionierung innerhalb eines scrollenden Elements mit einer Tabelle

Die kürzlich eingeführte CSS-Eigenschaft position: sticky ermöglicht es Elementen, innerhalb ihres übergeordneten Containers fixiert zu bleiben beim Scrollen. Es gibt jedoch eine Frage bezüglich seiner Funktionalität innerhalb eines scrollenden Divs, das eine Tabelle enthält.

Die aktuelle Situation

Anfangs wurde angenommen, dass position: sticky nur möglich ist Arbeit innerhalb seines übergeordneten Elements. Es wurde jedoch festgestellt, dass diese Eigenschaft verwendet werden kann, um Sticky-Tabellenüberschriften innerhalb eines scrollenden Divs zu erstellen.

Die Lösung

Um dies zu erreichen, fügen Sie einfach Folgendes hinzu Zeile zu Ihrem Stylesheet:

<code class="css">thead th { position: sticky; top: 0; }</code>

Der und Damit dieser Stil funktioniert, sind Elemente erforderlich.

Mehrere Kopfzeilen

Wenn Ihre Tabelle mehrere Zeilen im hat, können Sie die erste Zeile als Sticky festlegen indem Sie den folgenden Code verwenden:

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

Browser-Unterstützung

Seit März 2018 ist die Unterstützung für position: sticky in modernen Browsern weit verbreitet. Sie können die neuesten Kompatibilitätsinformationen unter https://caniuse.com/#feat=css-sticky überprüfen.

Credit

Der Credit für diese Entdeckung geht an @ ctf0, der diese Technik im Dezember 2017 geteilt hat.

Das obige ist der detaillierte Inhalt vonWie kann ich Sticky-Table-Header innerhalb eines Scrolling-Divs erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!