--- title: "Wie man Tabellenkopfzeilen einfriert" slug: "how-to-freeze-table-headers" updated: 2026-06-22T08:43:25Z published: 2026-06-22T08:43:25Z canonical: "docs.document360.com/how-to-freeze-table-headers" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Wie man Tabellenkopfzeilen einfriert Das Einfrieren der Tabellenkopfzeile hält die Spaltentitel sichtbar, während der Leser durch lange Tabellen scrollt, was die Interpretation der Daten erleichtert, ohne nach oben scrollen zu müssen. HINWEIS Document360 bietet eine integrierte [Tabellen-Freeze-Funktion](/help/docs/de/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) im Advanced WYSIWYG-Editor, mit der Sie eine Kopfzeile oder -spalte ohne benutzerdefinierten Code einfrieren können. Nutze die untenstehenden Schritte nur, wenn du die CSS-basierte Lösung brauchst. --- ## Wann man eingefrorene Tabellenkopfzeilen verwenden sollte - **Lange Referenztabellen** – wenn eine Tabelle viele Zeilen hat, verlieren die Leser beim Scrollen den Überblick darüber, welche Spalte sie lesen. Ein eingefrorener Header beseitigt dieses Problem. - **Vergleichstabellen** – das Einfrieren der Kopfzeile sorgt dafür, dass die Spaltenbeschriftungen sichtbar bleiben, wenn die Leser durch Zeilen vergleichbarer Optionen scrollen. - **Datenlastige Artikel** – jede Tabelle, die hoch genug ist, um ein Scrollen zu erfordern, profitiert von einer festen Überschrift. --- ## Wie das funktioniert Dieser Ansatz verwendet zwei Komponenten: - **Benutzerdefiniertes CSS** — macht den Tabellencontainer scrollbar und pinnt die Header-Reihe oben im sichtbaren Bereich. - **HTML-Wrapper pro Artikel** – das CSS aktiviert sich nur für Tabellen, die in gewrappt sind `<div class="fixed-header-table">`, sodass es nicht jede Tabelle auf der Seite beeinflusst. Du wirst den Wrapper einzeln auf jede Tabelle angewendet, die einen eingefrorenen Header benötigt. --- ## Kurze Referenz **CSS-Snippet** – einmal in benutzerdefinierte CSS-Einstellungen einfügen: ``` .fixed-header-table div[data-type="table-content"] {    position: relative;    max-height: 400px;    overflow-y: auto;    border: 1px solid #ddd; } table {    width: 100%;    border-collapse: collapse; } tbody th {    position: sticky;    top: 0;    z-index: 2; } ``` **HTML-Wrapper pro Artikel** – packen Sie Ihren Tabellencode in diesem Div in der Codeansicht ein: ```
Your table code
``` --- ## Wie man einen Tabellenkopf einfriert ### Fügen Sie das CSS hinzu 1. Im Knowledge Base-Portal gehen Sie zu **Einstellungen** > **Knowledge Base-Seite** > **Custom CSS & JavaScript**. 2. Wählen Sie den **CSS-Tab** und fügen Sie den folgenden Ausschnitt ein: ``` .fixed-header-table div[data-type="table-content"] {    position: relative;    max-height: 400px;    overflow-y: auto;    border: 1px solid #ddd; } table {    width: 100%;    border-collapse: collapse; } tbody th {    position: sticky;    top: 0;    z-index: 2; } ``` 1. Klicken **Sie auf Speichern**. ### Wickle die Tabelle in den Artikel ein 1. Öffnen Sie den Artikel mit der Tabelle, die Sie einfrieren möchten. 2. Wechsle zur **Codeansicht**. 3. Finde die HTML-Tabelle und packe sie in den folgenden Div ein: ```
Your table code
``` Die Kopfzeile bleibt nun oben in der Tabelle fest, während der Leser durch den Inhalt scrollt. --- ## Ergebnis Wenn ein Leser durch eine lange Tabelle scrollt, bleiben die Spaltenüberschriften oben in der Tabelle sichtbar. ![Animated demonstration showing a long table where the header row stays fixed at the top while the reader scrolls through the table content.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Table header freezing.gif) --- ## Umfang und Reichweite | Gegenstand | Detail | | --- | --- | | Umfang | Per-Tabelle – nur Tabellen, die mit gewickelt werden `<div class="fixed-header-table">` , sind betroffen | | Standardhöhe des Scrolls | 400px — im CSS anpassen `max-height` , um sich beim Aktivieren des Scrollens zu ändern | | Eingebaute Alternative | Der Advanced WYSIWYG-Editor verfügt über eine native [Tabellen-Freeze-Funktion,](/help/docs/de/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) die keinen benutzerdefinierten Code benötigt | --- ## Best Practices - **Passen `max-height` Sie Ihren Inhalt an –** der Standard von `400px` Werken in den meisten Fällen –, aber bei sehr dichten Tabellen oder spezifischen Layoutanforderungen erhöhen Sie diesen Wert, damit die Leser nicht zu früh innerhalb einer Tabelle scrollen müssen. - **Nutzen Sie die eingebaute Freeze-Funktion möglichst** – wenn Sie im Advanced WYSIWYG-Editor arbeiten, ist die native Freeze-Funktionalität einfacher anzuwenden und erfordert keinen Zugriff auf die Code-Ansicht. - **Wenden Sie den Wrapper nur auf Tabellen an, die ihn benötigen** – da die Klasse pro Tabelle manuell hinzugefügt werden muss, haben Sie die volle Kontrolle darüber, welche Tabellen einfrieren und welche nicht. Reserviere es für Tische, die groß genug sind, um wirklich von einem festen Kopf zu profitieren. - **Testen Sie nach der Anwendung** – wechseln Sie nach dem Umpacken einer Tabelle zur Vorschau der Knowledge Base, um zu bestätigen, dass der Header korrekt bleibt und der Scrollcontainer auf der erwarteten Höhe gerendert wird.