what do you mean by "you tried it" ?

did you use a forge component?

did you build it yourself?

did you use some jquery plugin?

I use in CSS the Property "fixed" to the HeaderStyle.

SyntaxEditor Code Snippet

.TableRecords_Header{
    height: 40px;
    position: fixed;
}

Hi Henrique,

Can you explain what's your goal here?

I'm not really sure what's supposed to be the outcome of making an HTML table's header having a "fixed" position...

Even though its a nice idea that will not work.

Please look at the forge or jquery plugins.

Hi, 

Exactly Claring! 

Example: https://codepen.io/tjvantoll/pen/JEKIu

I already gave you the answer twice, so here's my final and third:

https://www.outsystems.com/forge/component/1009/headerfixed/

HI J,

Will this works on OS11 as well?

Thanks

Ash

Hi Ash,

Without trying it myself, I'd expect it will still work for Traditional Web applications. Reactive Web Apps do not include jQuery and pure JavaScript is the recommended approach. 

There now seem to be other ways to achieve this anyways with only CSS (like this one or these two).

Hope this helps!

Hi Henry, take a look at this page. It will explain in detail how to do this:

https://success.outsystems.com/Documentation/How-to_Guides/Front-End/How_to_scroll_records_in_a_table_with_a_fixed_header

Hi there, 

Nowadays all you need is some good CSS classes. The key attribute is the position: sticky, for documentation on that CSS property check this link: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning 

If you want to apply the sticky header to all your table records, just apply the following: 

.TableRecords .TableRecords_Header{
    position: sticky;
    top: var(--header-size);  
    z-index: 5;
}

For all modern browsers, this works well. You only need the other techniques for compatibility with legacy browsers no one should be using anyway.