Template:Sticky header/doc

This template makes a table's column headers stick to the top of the screen as the table's data is scrolled in and out of view. It's used on tall tables that have column headers that might be difficult to remember as you scroll through the data.

Usage
Include this template by adding or its redirect  above a table. Add one of the following classes to the table start wikitext.

An optional  class can be added to a div around the table to limit the height/width and make it scrollable. See.

Single sticky header row
The  class is used to make the first header row top sticky. Sortable is not required.

Multiple sticky header rows
The  class is used to make multiple header rows top sticky. Sortable table is required since sortable is currently the only way to move consecutive rows of column headers to the element. If some or all columns should not be sortable, then  can be put in the header cell with the sorting icon. Table top will still be sticky. See Help:Sortable tables. If JavaScript is disabled, then sortable and this solution won't work.

Avoid using the  class since sortable moves those rows into the  element after sorting, which makes them top sticky too. A solution might be to move them to the bottom and use the  class instead.

Header rows not for whole table
Consecutive rows of column headers are top sticky, so avoid adding a row of headers right under the column headers that don't apply to the entire table such as a section header meant to visually separate the table.

A solution might be to move each section to a column or separate tables, which also avoids accessibility issues per MOS:COLHEAD.

Another solution might be to add a blank row of data cells between the last column header row and the first section header row so the latter is not included in the consecutive header rows.

Excessively tall header rows
Avoid excessively tall header rows that might block too much or all data when sticky on a small mobile screen, especially in landscape orientation. Some solutions might be to move some of the header text to the table caption, more concise header text, remove line-breaks in the headers, or split the table up into smaller tables to reduce headers.

Scrollable table
An optional  class can be added to a div around a very tall/wide table to limit its height/width and make it scrollable in a smaller area. This helps to prevent the table from overflowing beyond the width of the main content area. It also helps minimize the amount of vertical page scrolling to bypass table content, especially on small mobile screens. It works with the  and   table classes. The column headers will stick to the top of the div instead of the page.

Window height can be controlled further. For example:

Known issues
Tested in browsers on Windows 10, Windows 11, iOS 17 (iphone SE 2020 and iPhone 14 Pro Max), and Android 14 (Samsung Galaxy S21).


 * On Android phones, table headers aren't top-sticky if at least one table using this template is wider than the screen, which is more likely in portrait orientation. The table's horizontal scroll doesn't work with this template, so wide tables span outside of the main content area making the entire page wider and requiring you to instead horizontally scroll the entire page. Zooming out to see the entire table makes the headers sticky, but also makes the text smaller and less readable the wider the table is. Currently, the only semi-solution is to view the zoomed out sticky headers in landscape orientation instead of portrait orientation so that the text is more readable. This issue doesn't exist with the  div class.
 * - Do not use this around tables. It prevents sticky headers until removed. See diff. See "List by region" table.