Stickyng the table header

Wappler General Need Help
13

@revjrblack, thanks for helping! What You propose, I planned to do initially. However, the way to configure css position: sticky attracted me too much because of its simplicity and I was able to figure out what the problem is.

Tuning becomes literally two steps:

  1. When generating a table in Wappler, you do not need to include the responsive class.
  2. Set the tags th position: sticky and background color, and set the z-index. Also adjust the frame styles of the table, so that it is displayed correctly in the header when scrolling. As a result, the following code will be added to our css:
table {
    border-collapse: separate;
    border-spacing: 0;
}

th {
    background: #F0F0F1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1200;
}

Nothing else to do and it will work great! Decided to share, perhaps someone it will be useful and he can use it to solve in your project.

Good luck all! :wink:

2 Likes