Können Sie mit „position: sticky' einen Tabellenkopf innerhalb eines scrollenden Divs festhalten?

Sticky-Header in Scrolling-Table-Divs

Mit der kürzlichen Einführung von „position: sticky“ in Webkit untersuchen Entwickler dessen mögliche Verwendungsmöglichkeiten. Eine Frage, die sich stellt, ist, ob es verwendet werden kann, um den Header (thead) einer Tabelle innerhalb eines scrollenden Divs beizubehalten.

Konzept

Standardmäßig ist 'position: „sticky“ beschränkt seine Funktionalität auf das übergeordnete Element und ist daher für dieses spezielle Szenario ungeeignet. Es ist jedoch möglich, die „Sticky-Positionierung“ zu nutzen, um den gewünschten Effekt zu erzielen.

Lösung

Um die Tabellenüberschrift im Scroll-Div festzuhalten, können Sie dies tun Fügen Sie die folgende Zeile in Ihr Stylesheet ein:

thead th { position: sticky; top: 0; }

Stellen Sie sicher, dass Ihre Tabelle über die erforderlichen „thead“- und „th“-Elemente verfügt, um den Stil anzuwenden.

Implementierung

<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>

Verwenden Sie bei mehreren Zeilen im „Thead“ dies, um die Klebrigkeit in der ersten Zeile beizubehalten:

thead tr:first-child th { position: sticky; top: 0; }

Browser-Unterstützung

Seit März 2018 wird „position: sticky“ in allen modernen Browsern umfassend unterstützt: https://caniuse.com/#feat=css-sticky

Credit

Diese Lösung wurde ursprünglich von @ctf0 in einem Kommentar am 3. Dezember 2017 vorgeschlagen.

Das obige ist der detaillierte Inhalt vonKönnen Sie mit „position: sticky' einen Tabellenkopf innerhalb eines scrollenden Divs festhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!