You're looking for sticky headers, which is done with the CSS "position:sticky". Direct CSS support isn't quite there yet in modern browsers (actually recently removed from Chrome due to a bad implementation).
That said, you can achieve this by using JavaScript or a JavaScript CSS polyfill as discussed in this article.
The CSS to make a header stick is
.headerr {
position: -webkit-sticky; /*To support the Safari browser */
position: sticky;
top: 0;
index : 10; /* to keep the header on the top*/
}
the sticky behavour does not work when the any parent element have overflow or height property, you would need to over right that behaviour (as mendix data grid has an over flow property in class .mx-grid )
You could also try setting a fixed height for the table contents height. Add something like this to your theme:
.grid500high .mx-datagrid-content-wrapper {
max-height: 500px;}
.grid500high .mx-grid-content {
overflow-y: scroll;
}
Then set your table class to grid500high
Anyone have a fix / javascript polyfill for this for datagrids in Mendix 7?
Also very interested for 7.23.7!!!!