Tables with a sticky header in online documentation

When the header row of a long table disappears when scrolling, it can become difficult for users to correctly assign the contents of the table columns. In such a case, it may be useful to make the header "sticky". The header row then remains at the top of the window when scrolling until the end of the table has been reached.

Example 1: Normal table with a sticky header row

Scroll down and observe the header of the table:

Implementation for example 1

Requirements:

▪The solution works only if your authoring tool generates full HTML tables, using the <th> element for the header as provided by HTML for this purpose.

▪The cells of the header should be assigned a background color so that the header completely covers the content behind it when scrolling.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

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

Step 2: Enclose each table that you want to have a sticky header in the following two HTML snippets:

<div class="stickyheadertable">

</div>

Tip: If you want to have the sticky header on all tables in your document (rarely makes sense, but sometimes it does), change the CSS as follows. You do not need the HTML snippets around a particular table in this case.

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

Example 2: Size-limited table with sticky header row

If you prefer to limit the height of the table, you can do so as well. It makes the topic shorter, but the downside is that it requires additional user interaction for scrolling.

Implementation for example 2

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

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

Step 2: Place each table that you want to have a sticky header between the following two HTML snippets:

<div class="stickyheadertablesmall">

</div>

___
 
Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.