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!