Hoe bevries je tabelheaders

Het bevriezen van de tabelkop houdt de kolomtitels zichtbaar terwijl een lezer door lange tabellen scrollt, waardoor het makkelijker wordt om de data te interpreteren zonder terug te scrollen naar boven.

Wanneer bevroren tafel-headers te gebruiken

• Lange referentietabellen — wanneer een tabel veel rijen heeft, verliezen lezers het overzicht van welke kolom ze lezen terwijl ze naar beneden scrollen. Een bevroren header elimineert dat probleem.
• Vergelijkingstabellen — het bevriezen van de header zorgt ervoor dat de kolomlabels zichtbaar blijven wanneer lezers door rijen met vergelijkbare opties scrollen.
• Data-rijke artikelen — elke tabel die hoog genoeg is om te scrollen profiteert van een vaste kop.

Hoe dit werkt

Deze benadering maakt gebruik van twee componenten:

• Aangepaste CSS — maakt de table container scrollbaar en pint de header-rij aan de bovenkant van het zichtbare gebied.
• Per-artikel HTML-wrapper — de CSS activeert alleen voor tabellen die in <div class="fixed-header-table">, dus het beïnvloedt niet elke tabel op de site. Je brengt de wrapper individueel aan op elke tabel die een bevroren header nodig heeft.

Snelle referentie

CSS-fragment — één keer plakken in Aangepaste CSS-instellingen:

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

Per-article HTML-wrapper — wikkel je tabelcode in deze div in codeweergave:

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

Hoe bevries je een tabelheader

Voeg de CSS toe

1. Ga in het Knowledge Base-portaal naar Instellingen > Knowledge Base-site > Custom CSS & JavaScript.
2. Selecteer het CSS-tabblad en plak het volgende fragment:

.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. Klik op Opslaan.

Wikkel de tabel in het artikel

1. Open het artikel met de tabel die je wilt bevriezen.
2. Schakel over naar codeweergave.
3. Zoek de HTML-tabelcode en wikkel deze in de volgende div:

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

De header-rij blijft nu vast bovenaan de tabel terwijl de lezer door de inhoud scrollt.

Uitkomst

Wanneer een lezer door een lange tabel scrollt, blijven de kolomkoppen zichtbaar bovenaan de tabel.

Reikwijdte en dekking

Best practices

• Pas max-height aan om bij je inhoud te passen — de standaard werken 400px in de meeste gevallen, maar voor zeer dichte tabellen of specifieke lay-outvereisten verhoog je deze waarde zodat lezers niet te vroeg binnen een tabel hoeven te scrollen.
• Gebruik de ingebouwde freeze-functie waar mogelijk — als je in de Advanced WYSIWYG-editor werkt, is de native freeze-functionaliteit eenvoudiger toe te passen en vereist geen toegang tot codeweergaven.
• Pas de wrapper alleen toe op tabellen die het nodig hebben — omdat de klasse per tabel handmatig moet worden toegevoegd, heb je volledige controle over welke tabellen bevriezen en welke niet. Reserveer het voor tafels die hoog genoeg zijn om echt te profiteren van een vaste kop.
• Test na het toepassen — schakel over naar de Knowledge Base site preview na het wrappen van een tabel om te bevestigen dat de header correct blijft hangen en de scrollcontainer op de verwachte hoogte wordt weergegeven.