Hi All,
I have seen multiple posts with this topic and believe me I tried but its not working for me, hence I am posting it as a new question.
I need to fix header for table, for which I tried below css, applied it to table header:
.custom-header-fixed{
position: sticky;
top: var(--header-size);
z-index: 5;
}
Also one more css is applied to the container which is enclosing the table, below is the css:
.Scroll-Table{
overflow-x: auto;
So when I remove the above scroll table css from container, the custom header fixed css works but I also need to have scroll table as the content is then going out of the container.
Below is the oml attached for your reference.
Thanks
Shivangi
Hello @Shivangi Thakur
Try this below oml file or CSS
.Scroll-Table thead {
top: 0;
z-index: 99999;
.Scroll-Table {
overflow: auto;
max-height: 400px;
I hope this helps
Hi
will try it, thanks
Try this oml file
it worked but when the screen is scrolled the table header collapsed with the main menu header, can you suggest anything for this?
Please the remove z-index: 99999; property or I have attached updated oml file
Thanks for you quick response that worked, but in real time I have this color content in the table, which is getting overlapped with the column text of the table on scrolling, see image..
anything you can suggest?
Here is the oml attached, right now the color provided is static but in real case its coming from dynamic list, but with static one i am not able to reproduce the issue.. you will see for manager column in the oml i have provided color,,
Try this oml file I think inside list are coming so issue there
Hi @Shivangi Thakur
This is happening because there is not fixed height to the container in which the table is enclosed.
I just gave the height as 100vh and removed the extra top from the custom-header-fixed class and it worked like a charm.
If you face any overlapping issues in your table, then increase the z index of the header to as large as possible from all the elements present on your page.
Check the attached OML for your reference.
I hope it helps.
Hi @Rishabh Tailor
Thanks for your help it worked.
I am glad to hear it.
Happy to help.
Mark the response that you found to be the most effective.