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:

Parameter

Function

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

aa

efewf

rr

wefwef

bb

wefwef

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

sss

efwef

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.

Parameter

Function

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

sss

efwef

aa

efewf

rr

wefwef

bb

wefwef

aa

efewf

rr

wefwef

bb

wefwef

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>

___
 
Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.