Kann CSS allein eine browserübergreifende scrollbare Tabelle mit festen Überschriften erstellen?-CSS-Tutorial-php.cn

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich SVGs in CSS ::before und ::after Pseudoelemente einbetten? Nächster Artikel：Wie animiere ich ein Div in jQuery von einer festen Höhe zu seiner automatischen Höhe?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2176

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2327

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1958

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...