Eine Tabellenkappe ist eine spezielle Zeile, die Spaltennamen enthält und oft getrennt vom Hauptinhalt der Tabelle hervorgehoben wird. Wenn eine Tabelle mehrere Seiten einnimmt, ist es nicht immer praktisch, wenn die Kappe verschwindet, wenn Sie zu einer neuen Seite wechseln. In diesem Artikel werden wir uns ansehen, wie Sie die Tabellenkappe auf der nächsten Seite wiederholen können, um eine einfache Lese- und Navigation zu ermöglichen.
Der erste Weg besteht darin, die CSS–Eigenschaft zu verwenden table-header-group. Wenn Sie diese Eigenschaft auf eine Zeile mit Tabellenkapsel anwenden, wird sie auf jeder Seite wiederholt, auf der sich die Tabelle selbst befindet. Dies ist eine ziemlich praktische Lösung für einfache Tabellen ohne komplexe Struktur.
Die zweite Möglichkeit besteht darin, die CSS–Eigenschaft zu verwenden position: fixed. Dadurch wird die Tabellenkappe am oberen Bildschirmrand befestigt und ist immer sichtbar, auch wenn Sie durch die Seite scrollen. Diese Lösung hat jedoch auch Nachteile – Bei großen Datenmengen kann die Tabelle aufgrund des begrenzten Speicherplatzes unlesbar werden.
Die Wahl der Wiederholungsmethode für die Tabellenkappe hängt von den spezifischen Anforderungen und Besonderheiten Ihres Projekts ab. Es ist wichtig, ein Gleichgewicht zwischen Lesbarkeit und ästhetischen Designprinzipien zu finden.
Setzen Sie es so, dass die Tabellenkappe auf der nächsten Seite wiederholt wird
Um das Attribut thead zu verwenden, müssen Sie alle Zellen des Tabellenoberteils in das Tag thead einfügen. Nachdem Sie das Thead-Tag geschlossen haben, können Sie die restlichen Zeilen und Zellen der Tabelle platzieren.
Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8
In diesem Beispiel werden die Zellen der Tabellenkappe (Überschrift 1 und Überschrift 2) innerhalb des thead-Tags platziert. Dieser Titel wird auf den folgenden Seiten wiederholt, wenn Sie die Tabelle drucken oder durchlaufen.
Jetzt wissen Sie, wie Sie den Tabellenkopf mit dem Attribut thead auf der nächsten Seite wiederholen.
Tabelle auswählen
Um einen Stil für den Tabellendeckel festzulegen, müssen Sie zuerst die Tabelle selbst auswählen. Dazu wird ein Tag verwendet. Es definiert den Anfang und das Ende einer Tabelle auf einer Webseite.
Header 1 Header 2 Data 1 Data 2
In diesem Beispiel wird eine einfache Tabelle mit einer Kappe erstellt, die zwei Kopfzeilen (Header 1 und Header 2) und eine Datenzeile (Data 1 und Data 2) enthält. Mit einem Tag werden die Zellen der Tabellenkappe und mit einem Tag die Zellen mit Daten gekennzeichnet.
Um Stile auf eine Tabellenkapsel anzuwenden, verwenden Sie einfach einen Selektor table in einer CSS-Datei oder in einem Tag innerhalb des Tags webseiten.
table border-collapse: collapse;
width: 100%;
>
th background-color: #f2f2f2;
color: #000;
font-weight: bold;
padding: 8px;
>
Beispiel für CSS-Stile für Tabellen und Caps:
- border-collapse: collapse; - Verschmelzen von Zellgrenzen;
- width: 100%; - Tabellenbreite um 100%%;
- background-color: #f2f2f2; – Hintergrundfarbe der Kappe (in diesem Fall hellgrau);
- color: #000; – die Farbe des Textes in der Kappe (in diesem Fall schwarz);
- font-weight: bold; - fett Text in der Kappe;
- padding: 8px; - Einzug innerhalb der Kappenzellen.
Sie können ähnliche Stile auch auf andere Tabellenelemente anwenden, z. B. Datenzellen oder Zeilen.
Fügen Sie der Tabelle das Attribut "thead" hinzu
Beispiel für die Verwendung des Attributs "thead":
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|
In diesem Beispiel werden die Spaltenüberschriften () im Tabellenkopf () festgelegt. Der Tabellenkörper befindet sich im Tag .
Mit dem Attribut "thead" können Sie den Titel auf jeder Seite beim Drucken oder Scrollen durch die Tabelle wiederholen, was eine bessere Navigation und ein besseres Verständnis der Daten ermöglicht.
Eine Tabelle in mehrere Seiten aufteilen
Um eine Tabelle in mehrere Seiten aufzuteilen, müssen Sie CSS-Stile verwenden. Dazu können Sie die Eigenschaft verwenden page-break-before oder page-break-inside mit entsprechenden Werten.
Wenn Sie möchten, dass jede Zeile der Tabelle mit einer neuen Seite beginnt, können Sie die folgende CSS-Regel verwenden:
Auf diese Weise wird vor jeder Tabellenzeile ein Seitenumbruch hinzugefügt.
Wenn Sie möchten, dass die Tabelle nur zwischen den Seiten aufgeteilt wird, können Sie die folgende CSS-Regel verwenden:
table
Auf diese Weise werden alle Tabellenzeilen nach Möglichkeit auf derselben Seite angezeigt. Wenn die Tabelle nicht auf eine Seite passt, wird sie in mehrere Seiten aufgeteilt.
Es ist wichtig zu beachten, dass nicht alle Browser diese CSS-Eigenschaften unterstützen. Daher wird empfohlen, dass Sie ihre Arbeit in verschiedenen Browsern überprüfen, bevor Sie sie in der Praxis verwenden.
Set Stil für Tabellenkappen
Sie können CSS-Stile verwenden, um die Tabellenkappe auf der nächsten Seite zu einer Wiederholung zu machen. Fügen Sie dazu dem Tabellenoberflächenelement eine Klasse oder einen Bezeichner hinzu und legen Sie die entsprechenden Stile für das Tabellenoberflächenelement fest.
Wenn beispielsweise ein Tabellenkopf in einem Tag dargestellt wird, können Sie den folgenden CSS-Code verwenden:
In diesem Beispiel wird die Klasse verwendet .sticky-header. aber Sie können auch eine ID verwenden. Die angegebenen Stile bewirken, dass die Tabellenkappe am oberen Rand des Fensters haftet und andere Elemente mithilfe von z-index.
Nachdem Sie die Stile definiert haben, müssen Sie die Klasse oder den Bezeichner auf das Tabellenoberflächenelement anwenden. Zum Beispiel:
Der Tabellenkopf wird nun beim Scrollen auf der nächsten Seite wiederholt. Dies kann nützlich sein, wenn eine Tabelle viele Zeilen einnimmt und ihre Kappe außerhalb einer Seite liegt.
Browsereinschränkungen überprüfen
Sie können den folgenden einfachen Test verwenden, um zu überprüfen, ob Ihr Browser die Wiederholung der Tabellenkappe auf der nächsten Seite unterstützt:
- Erstellen Sie eine Tabelle mit einer Kappe, die auf der nächsten Seite wiederholt werden soll;
- Füllen Sie die Tabelle mit vielen Zeilen aus, so dass die Höhe der Tabelle größer als eine Seite ist;
- Drucken Sie eine Seite mit einer Tabelle.
Wenn sich der Tabellenkopf auf der nächsten Seite wiederholt, unterstützt Ihr Browser diese Funktion. Wenn sich die Tabellenkappe nicht wiederholt und nur auf der ersten Seite gedruckt wird, unterstützt Ihr Browser die Wiederholung der Tabellenkappe auf der nächsten Seite nicht.
In diesem Fall können Sie andere Methoden verwenden, um die Einschränkungen des Browsers zu umgehen, z. B. spezielle Drucktechnologien wie PDF oder CSS3.
Verwenden Sie die CSS-Eigenschaft "Position: sticky"
Sie können die CSS-Eigenschaft "position: sticky" verwenden, um den Tabellenkopf auf der nächsten Seite zu wiederholen. Diese Eigenschaft ermöglicht es dem Element, sichtbar zu bleiben, wenn die Seite gescrollt wird und wenn eine bestimmte Position erreicht wird, wird es an seiner Stelle fixiert.
Um diese Eigenschaft auf eine Tabellenkapsel anzuwenden, müssen Sie die folgenden Stile für die Tabellenkapsel festlegen:
.table-headerHier ist die Klasse "table-header" für das Styling der Tabellenkappe verantwortlich. Die CSS-Eigenschaft "position: sticky" ermöglicht es dem Element, beim Scrollen an seiner Position im Container zu bleiben.
Optional können Sie die Eigenschaft "top" auf "0" setzen, um die Tabellenspitze am oberen Rand des Containers zu fixieren, und Sie können auch die Hintergrundfarbe anpassen, z. B. mit der Eigenschaft "background-color".
Wenn Sie also die CSS-Eigenschaft "position: sticky" auf die Tabellenspitze anwenden, können wir sicherstellen, dass sie beim Scrollen auf der nächsten Seite wiederholt wird, was die Navigation in großen Tabellen verbessert.
Testen und debuggen
Hier sind einige Schritte, mit denen Sie Ihre Tabelle testen und debuggen können:
- Überprüfen Sie, ob der Tabellenkopf auf der ersten Seite angezeigt wird. Stellen Sie sicher, dass die Spaltenüberschriften sichtbar und korrekt formatiert sind.
- Blättern Sie nach unten, und stellen Sie sicher, dass die Tabellenkappe beim Scrollen sichtbar bleibt. Wenn die Tabellenkappe fehlt oder nicht korrekt angezeigt wird, müssen Sie möglicherweise den CSS-Code korrigieren, um sicherzustellen, dass die Kappe auf allen Seiten korrekt wiederholt wird.
- Drucken Sie das Dokument aus, und stellen Sie sicher, dass sich der Tabellenkopf auf der nächsten Seite wiederholt, wenn Sie die Tabelle in mehrere Seiten aufteilen. Wenn die Tabellenkappe nicht wiederholt wird oder nicht korrekt angezeigt wird, müssen Sie den HTML- und CSS-Code überprüfen und debuggen, um herauszufinden, was das Problem ist.
- Überprüfen Sie die Tabelle auf verschiedenen Geräten und Browsern, um sicherzustellen, dass sich die Tabellenkappe auf allen gedruckten Seiten wiederholt. Verschiedene Geräte und Browser können Tabellen auf unterschiedliche Weise rendern, daher ist es wichtig, Ihre Tabelle auf verschiedenen Plattformen zu testen.
Wenn Sie diese Schritte befolgen, können Sie Ihre Tabelle testen und debuggen, um sicherzustellen, dass die Kappe auf der nächsten Seite korrekt wiederholt wird, wenn die Tabelle paginiert wird.
