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

Tabelle mit festem Kopf und fester Spalte unter Verwendung von reinem CSS

Das Erstellen einer Tabelle mit festem Kopf und fester erster Spalte ohne JavaScript stellt Herausforderungen dar mobile Browser. In diesem Artikel wird eine reine CSS-basierte Lösung untersucht, die diese Funktionalität effektiv erreicht.

Lösung mit CSS Sticky Positioning:

Moderne Webbrowser unterstützen die Position: Sticky-Eigenschaft, die Ermöglicht das Festhalten von Elementen an bestimmten Kanten ihres enthaltenden Blocks, entweder horizontal (links/rechts) oder vertikal (oben/unten). Durch die Nutzung dieser Eigenschaft können wir einen festen Tabellenkopf und eine feste erste Spalte erreichen.

Schritte zur Implementierung:

1. Container erstellen:Platzieren Sie Ihre Tabelle in einem Containerelement, das das Scrollen übernimmt.
2. Scrollen aktivieren Container:Überlauf angeben: Scrollen Sie über den Container, um horizontales/vertikales Scrollen zu ermöglichen.
3. Kopfzeile und Zellen der ersten Spalte einkleben:Verwenden Sie die Sticky-Positionierung für die Tabellenüberschriften (Kopfzeile). Bleiben Sie oben und die Zellen der ersten Spalte (tbody th) bleiben links.
4. Kopfzeile links fixieren Spalte: Um sicherzustellen, dass die Kopfzelle in der ersten Spalte fixiert bleibt, legen Sie links: 0 und z-index: 2 für den Kopf th:first-child fest. Der Z-Index wird verwendet, um sicherzustellen, dass die Header-Zelle über dem emulierten Rand im Tbody-Stil bleibt.
5. Rand für erste Spalte emulieren: Browser neigen dazu, Ränder auf Sticky-Elementen zu platzieren. Um dies zu beheben, emulieren wir den rechten Rand mit einem Box-Shadow auf dem Körper.

CSS-Code:

/* Enable scrolling on container */
div.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

/* Stick header cells to top */
thead th {
  position: sticky;
  top: 0;
}

/* Stick first column cells to left */
tbody th {
  position: sticky;
  left: 0;
}

/* Stick first column header cell on the left */
thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Emulate border for first column */
tbody th {
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

Fazit :

Durch die Kombination eines Scroll-Containers und einer Sticky-Positionierung können wir einen festen Tabellenkopf und eine feste erste Spalte erstellen ohne auf JavaScript angewiesen zu sein. Diese Lösung wird von modernen Browsern weitgehend unterstützt und bietet ein reibungsloses Scrollen sowohl auf Desktop- als auch auf Mobilgeräten.

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