Können Sie „position: sticky' für Tabellenüberschriften außerhalb der Tabelle verwenden?

Sticky-Tabellenüberschriften

Die Möglichkeit, Elemente innerhalb ihrer übergeordneten Elemente klebrig zu machen, wurde in Webkit eingeführt. Während Sie mithilfe von JavaScript und absoluter Positionierung ein Sticky-Verhalten für Tabellenüberschriften innerhalb der Tabelle selbst erreichen können, lohnt es sich zu überlegen, ob Sticky-Positionierung eine einfachere Lösung bieten kann.

Funktioniert position: sticky für Tabellenüberschriften außerhalb der Tabelle Tabelle?

Ja, es ist möglich, Tabellenüberschriften mithilfe der Sticky-Positionierung außerhalb der Tabelle einzukleben. Durch Hinzufügen des folgenden CSS können Sie diesen Effekt erzielen:

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

Um die Sticky-Positionierung für Tabellenüberschriften zu verwenden, sollte Ihre Tabelle über ein thead-Element verfügen, das die Elemente für jede Spaltenüberschrift enthält. Hier ist ein Beispiel:

<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>
    <!-- Table body content -->
  </tbody>
</table></code>

Einschränkungen und Kompatibilität

Es ist wichtig zu beachten, dass die Sticky-Positionierung zwar für Tabellenüberschriften in modernen Browsern funktioniert, die Kompatibilität jedoch je nach Gerät unterschiedlich sein kann und Browser. Laut caniuse.com ist die Unterstützung für Sticky-Positionierung (Stand März 2018) in modernen Browsern im Allgemeinen gut: https://caniuse.com/#feat=css-sticky

Das obige ist der detaillierte Inhalt vonKönnen Sie „position: sticky' für Tabellenüberschriften außerhalb der Tabelle verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!