Wie erstelle ich Sticky-Tabellenüberschriften mit „position: sticky;'?

Sticky-Tabellenüberschriften mit Position: Sticky

Die Position: Sticky; Die Eigenschaft wurde kürzlich in Webkit implementiert und bietet eine praktische Möglichkeit, Elemente zu erstellen, die beim Scrollen der Seite in ihrem übergeordneten Container fixiert bleiben. Während diese Funktion zunächst nur innerhalb des direkten übergeordneten Elements funktionierte, unterstützt sie jetzt das Scrollen innerhalb einer Tabelle.

Frage:

Wie kann ich die Position verwenden: sticky; Eigenschaft, um den Tabellenkopf beim Scrollen innerhalb eines Div-Containers zu korrigieren?

Antwort:

Sticky auf dem Kopf positionieren, was im Jahr 2018 mühelos funktioniert! Fügen Sie einfach die folgende CSS-Regel hinzu:

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

Um Sticky-Header zu verwenden, muss Ihre Tabelle a thead und th-Elemente enthalten.

<code class="html"><table >
    <thead >
        <tr >
            <th >column 1</th>
            <th >column 2</th>
            <th >column 3</th>
            <th >column 4</th>            
        </tr>    
    </thead>
    <tbody >
      // your body code
    </tbody>
</table ></code>

Wenn Ihr thead mehrere Zeilen enthält, können Sie angeben das Sticky-Verhalten für die erste Zeile:

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

Seit März 2018 werden Sticky-Header in den meisten modernen Browsern unterstützt. Aktuelle Informationen zur Browserkompatibilität finden Sie unter https://caniuse.com/#feat=css-sticky.

Der Dank für diese Lösung geht an @ctf0, der sie am 3. Dezember 2017 in einem Kommentar geteilt hat.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Sticky-Tabellenüberschriften mit „position: sticky;'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!