Tabellen mit klebender Kopfzeile in Onlinedokumentation

Wenn die Kopfzeile einer langen Tabelle beim Scrollen verschwindet, kann es für Nutzer schwierig werden, die Inhalte der Tabellenspalten richtig zuzuordnen. In einem solchen Fall kann es sinnvoll sein, die Kopfzeile „klebend“ (sticky) zu machen. Die Kopfzeile bleibt dann beim Scrollen am oberen Fensterrand stehen, bis das Ende der Tabelle erreicht ist.

Beispiel 1: Normale Tabelle mit klebender Kopfzeile

Scrollen Sie nach unten und beobachten Sie die Kopfzeile der Tabelle:

Implementierung zu Beispiel 1

Voraussetzungen:

• Die Lösung funktioniert nur dann, wenn Ihr Redaktionssystem vollständige HTML-Tabellen erzeugt und dabei für die Kopfzeile das dafür von HTML vorgesehene Element <th> verwendet.
• Den Zellen der Kopfzeile sollte eine Hintergrundfarbe zugewiesen sein, sodass die Kopfzeile dahinterliegende Inhalte beim Scrollen komplett überdeckt.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

div.stickyheadertable th {
  position: sticky;
  top: 0;
  z-index: 1;
}

Schritt 2: Setzen Sie jede Tabelle, die eine klebende Kopfzeile erhalten soll, zwischen folgende beiden HTML-Schnipsel:

<div class="stickyheadertable">

</div>

Tipp: Wenn Sie den Sticky-Header für alle Tabellen in Ihrem Dokument haben möchten (nur selten sinnvoll, aber es gibt diese Fälle), ändern Sie das CSS wie folgt. Die HTML-Schnipsel um eine bestimmte Tabelle benötigen Sie in diesem Fall nicht.

th {
  position: sticky;
  top: 0;
  z-index: 1;
}

Beispiel 2: Größenbeschränkte Tabelle mit klebender Kopfzeile

Wenn Sie die Höhe der Tabelle begrenzen möchten, können Sie dies ebenfalls tun. Dadurch wird das Topic kürzer. Der Nachteil ist allerdings, dass dies zusätzliche Interaktion vom Nutzer zum Scrollen erfordert.

Implementierung zu Beispiel 2

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

div.stickyheadertablesmall th {
  position: sticky;
  top: 0px;
  z-index: 1;  
}
.stickyheadertablesmall {
  width: 100%;
  height: 300px;
  overflow-y: auto;
} 

Schritt 2: Setzen Sie jede Tabelle, die eine klebende Kopfzeile erhalten soll, zwischen folgende beiden HTML-Schnipsel:

<div class="stickyheadertablesmall">

</div>