Wie erstelle ich eine feste Kopf- und Spaltentabelle nur mit CSS?

Erstellen einer Tabelle mit fester Kopfzeile und Spalte mit reinem CSS

Korrigieren der Kopfzeile:

Um einen festen Header ohne Verwendung von JavaScript zu erstellen, kann die Eigenschaft position: sticky verwendet werden. Diese Eigenschaft unterstützt das Anbringen von Elementen oben und an der Seite in modernen Versionen von Chrome-, Firefox- und Edge-Browsern.

Fixieren der ersten Spalte:

So reparieren Sie die erste Spalte , kann die gleiche Eigenschaft „position: sticky“ verwendet werden, jedoch mit einem zusätzlichen Stil „left: 0“, um zu erzwingen, dass das Element auf der linken Seite des Elements haftet Tabelle.

Beispielimplementierung:

1. Platzieren Sie die Tabelle in einem Container mit einer overflow: scroll-Eigenschaft, die das Scrollen innerhalb des Containers ermöglicht.
2. Verwenden Sie die Position: klebrig; oben: 0; Stil auf den Kopfelementen, um die Kopfzeile oben in der Tabelle zu befestigen.
3. Position hinzufügen: sticky; links: 0; zum Körper, um die erste Spalte zu fixieren.
4. Um sicherzustellen, dass die klebrige Kopfzeile über allen anderen Elementen bleibt, setzen Sie z-index: 1 auf dem Kopf.
5. Optional fügen Sie border-right hinzu: 1 Pixel fest #CCC; und box-shadow: 1px 0 0 0 #ccc; to tbody th, um einen Rahmen auf der festen Spalte zu emulieren.

Hinweis: Um sicherzustellen, dass dieses Setup ordnungsgemäß funktioniert, ist es wichtig, eine maximale Breite und maximale Höhe für die bereitzustellen Behälter.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine feste Kopf- und Spaltentabelle nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!