Können Sticky Header in scrollenden Divs für Tabellenüberschriften verwendet werden?

Sticky Header innerhalb scrollender Divs

Die Position: Sticky; Die Eigenschaft hat in Webkit an Bedeutung gewonnen und ermöglicht es Elementen, während des Scrollens in ihren übergeordneten Containern fixiert zu bleiben. Einige Entwickler haben jedoch die Notwendigkeit geäußert, diese Funktionalität auf scrollende Div-Elemente auszudehnen, die Tabellen enthalten.

Kann eine Sticky-Positionierung auf Tabellenüberschriften innerhalb eines scrollenden Divs angewendet werden?

Antwort:

In der Tat, Position: klebrig; kann jetzt für <thead> verwendet werden. ElementeStand 2018!

Implementierung:

Fügen Sie einfach die folgende Zeile zu Ihrem CSS-Stylesheet hinzu:

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

Voraussetzungen:

• Stellen Sie sicher, dass Ihre Tabelle einen <thead> und <th> Elemente.

Beispieltabellen-Markup:

<code class="html">&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;column 1&lt;/th&gt;
            &lt;th&gt;column 2&lt;/th&gt;
            &lt;th&gt;column 3&lt;/th&gt;
            &lt;th&gt;column 4&lt;/th&gt;            
        &lt;/tr&gt;    
    &lt;/thead&gt;
    &lt;tbody&gt;
      // body code
    &lt;/tbody&gt;
&lt;/table&gt;</code>

Zusätzliche Optionen:

• Zu beheben Die erste Zeile des <thead> Verwenden Sie beim Scrollen Folgendes:

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

Browserunterstützung:

Seit März 2018 wird die Sticky-Positionierung für Thead-Elemente in allen modernen Browsern weitgehend unterstützt , dank der Bemühungen der Entwicklergemeinschaft.

Das obige ist der detaillierte Inhalt vonKönnen Sticky Header in scrollenden Divs für Tabellenüberschriften verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!