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!