How to Create a Fixed Headers in WordPress tables (Sticky Header)

From wpDataTables 5.6, there’s a way to fix the table’s header to the top of the screen, when the user scrolls through a large table on a page. This way, the column headers will always be visible so that the user sees what information the columns in a table contain.

All you need to do to activate Fixed Headers is to access the “Advanced” tab above your table and enable the Fixed Headers checkbox:

fixed-header-settings

The Header Offset is the padding offset in pixels that will be added above the header, so if you don’t see the entire header when scrolling down, make sure to increase this offset.

The offset’s been added because a lot of sites and/or themes use a fixed navigation bar at the top of the screen so fixing the table header directly to the top of the screen may actually hide the header behind the menu or hero image.

It is recommended that the offset number be the same as the height of the site’s default menu bar in pixels.

The dummy table below shows a list of hotels in cities, with the dates, stars, and pricing.

Please note that this is a dummy table, and does not represent real data.

Fixed Headers can be combined with Fixed Columns, so your tables can have both a fixed header and fixed columns in order to provide a better viewing experience for your site visitors.

An example of this combination can be seen in the table below.