1. Home
  2. Bootstrap
  3. Creating a sticky header in Bootstrap Applications

Creating a sticky header in Bootstrap Applications


Often times in grid (table) based templates, developers want to ensure that the header row on a table “sticks” with the data as a user scrolls down the page. All Reports utilize this feature, available via the Application Property ‘Lock Table Header on Screen’.

For non-Report Bootstrap applications, the ‘Lock Table Header on Screen’ property does not exist. Instead, use the following snippet of CSS code to create a sticky header for your data table.

Note: As of the April 2021 update, this improved CSS implementation for sticky headers is now built into *all table-based Bootstrap templates by using the ‘Lock Table Header on Screen’ app property in ‘Edit Properties’.


Please insert the CSS code into the section of your application HTML. Note, this CSS rule can also be applied to your dictionary stylesheet.

<style type="text/css">
.tableFixHead {
  overflow-y: auto;
  height: 200px;
.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
.tableFixHead th {
  position: sticky;
  top: 45px;
  background: #fff;

To have a the data table use this sticky header, you will need to add the ‘tableFixHead’ (without the quotes) to the list of classes on the <table> element.

Table HTML code

Save your m-Painter and re-run the application to see the sticky header.

Updated on June 21, 2023

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!