Wie kann ich eine Tabelle mit einer festen Kopfzeile und einer festen Spalte nur mit CSS erstellen?

Tabelle mit festem Header und fester Spalte mit reinem CSS

Einführung:

Erstellen einer Tabelle mit festem Header und Eine feste erste Spalte kann eine stabile und optimierte Benutzererfahrung beim Anzeigen großer Datensätze oder Tabellen bieten, die über den sichtbaren Ansichtsbereich hinausgehen. Traditionell werden zu diesem Zweck JavaScript oder jQuery eingesetzt. Allerdings kann es bei mobilen Browsern zu Leistungsproblemen kommen. In diesem Artikel wird eine reine CSS-Lösung untersucht, um diese Funktionalität zu erreichen und gleichzeitig ein reibungsloses Scrollen aufrechtzuerhalten.

Verwendung der CSS-Sticky-Positionierung:

Die CSS-Eigenschaft „Position: Sticky“ ermöglicht das Festhalten von Elementen nach oben, zur Seite oder beides, wenn über einen bestimmten Punkt hinaus gescrollt wird. Diese Eigenschaft kann angewendet werden, um einen festen Kopf- und Spalteneffekt zu erzielen.

Schritte:

1. Verpacken Sie die Tabelle in einen Container: Erstellen Sie einen Div-Container zur Aufnahme der Tabelle.
2. Scrollen im Container aktivieren:Anwenden Überlauf: scrollen; zum Containerelement.
3. Kopfzeile nach oben kleben: Positionieren Sie die Kopfzeile (thead tr) mit position: sticky und top: 0;.
4. Heften Sie die erste Spalte an die Seite: Positionieren Sie die Zellen der ersten Spalte (tbody td:first-child oder tbody th:first-child) mithilfe der Position: klebrig und links: 0;.
5. Stil anwenden, um das Erscheinungsbild zu verbessern: Verbessern Sie die visuelle Attraktivität, indem Sie Stil für die Tabellen-, Kopfzeilen- und Spaltenelemente hinzufügen.

Zusätzliche Überlegungen:

• Container Abmessungen: Stellen Sie sicher, dass der Container über die entsprechenden Eigenschaften für maximale Breite und maximale Höhe verfügt, um das Scrollen einzuschränken.
• Z-Index: Verwenden Sie Z-Index, um die Überlappungsreihenfolge von Sticky-Elementen zu steuern .
• Browserunterstützung: Die Position: Sticky-Eigenschaft wird in modernen Versionen von Chrome, Firefox und unterstützt Edge.

Beispielcode:

.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

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

tbody td:first-child, tbody th:first-child {
  position: sticky;
  left: 0;
}

/* Styling */

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody td, tbody th {
  padding: 0.5em;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

Fazit:

Durch die Verwendung von CSS-Sticky-Positionierung wird es Es ist möglich, einen festen Header und einen festen Effekt für die erste Spalte in einer Tabelle zu erreichen, ohne auf JavaScript zurückgreifen zu müssen. Diese Lösung bietet einen reinen CSS-basierten Ansatz, der eine reibungslose Scrollleistung gewährleistet, insbesondere in mobilen Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Tabelle mit einer festen Kopfzeile und einer festen Spalte nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!