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.

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:

<div class="fixed-header-table">
Your table code
</div>

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;
}

3. 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:

<div class="fixed-header-table">
Your table code
</div>

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.

Umfang und Reichweite

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.