suchen

Heim >Web-Frontend >CSS-Tutorial >Kann CSS allein eine browserübergreifende scrollbare Tabelle mit festen Überschriften erstellen?

Kann CSS allein eine browserübergreifende scrollbare Tabelle mit festen Überschriften erstellen?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-06 13:39:17286Durchsuche

Can CSS Alone Create a Cross-Browser Compatible Scrollable Table with Fixed Headers?

Nur ​​CSS-scrollbare Tabelle mit festen Überschriften

Frage:

Gibt es eine reine CSS-Lösung zum Erstellen scrollbarer Tabellen? Tabellen mit festen Überschriften, die browserübergreifend sind konform?

Anforderungen:

  • Spaltenausrichtung zwischen Kopf-, Fuß- und Inhaltszeilen beibehalten
  • Kopf- und Fußzeile beibehalten, während die Inhalt scrollt vertikal
  • Kein jQuery oder JavaScript erforderlich
  • Nur ​​zur Verwendung Tabellenbezogene Tags (table, thehead, tbody, tr, th, td)

Lösung mit Position: Sticky:

Kompatibilitätshinweis: Überprüfen Sie die Unterstützung für position:sticky, bevor Sie diese Lösung verwenden.

position:sticky positioniert ein Element relativ zum nächsten scrollender Vorfahr oder das Ansichtsfenster, wenn es keine scrollenden Vorfahren gibt. Dieses Verhalten stimmt mit dem gewünschten Sticky-Header überein.

Die Zuweisung von position:sticky zu

, oder Tags treten in verschiedenen Browsern auf Probleme auf. Weisen Sie stattdessen
die Sticky-Eigenschaft zu. Zellen innerhalb eines Wrapper-Elements, das den Scroll-Überlauf definiert.

Code:

div {
  display: inline-block;
  height: 150px;
  overflow: auto;
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Styling */
table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
      </tr>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

Das obige ist der detaillierte Inhalt vonKann CSS allein eine browserübergreifende scrollbare Tabelle mit festen Überschriften erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css if for while using Property this position overflow viewport column table tbody td tr th
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich SVGs in CSS ::before und ::after Pseudoelemente einbetten?Nächster Artikel：Wie kann ich SVGs in CSS ::before und ::after Pseudoelemente einbetten?

In Verbindung stehende Artikel

Mehr sehen