DEV Community

Maik Michel
Maik Michel

Posted on • Originally published at micodify.de on

Sticky table header on classic report

Books

In a current project I wanted to make the table header sticky. After some googling, I found the following excellent post.

http://apexbyg.blogspot.com/2017/04/how-to-make-any-table-header-sticky.html

This all works great, but unfortunately not in a Modal Dialog. So I did some more research. And see, since Chrome 91 you can make your table headers and footers sticky with CSS.

The only thing you need are the following CSS lines:

table thead, table tfoot {
  position: sticky;
  z-index: 10; /* cause fontawesome icons */
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
  background-color: white; /* make your background not transparent*/
}

Enter fullscreen mode Exit fullscreen mode

Pay attention to the Z-Index, here the icons have the index 4 at APEX. So I packed the whole thing to an index of 10.

Have a look my demo on: https://apex.oracle.com/pls/apex/r/die21/demos/sticky-table-header

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay