How to pin table header

Hello,
I have a long aggregate form, when i scroll through, the header tends to hide it. How can we pin the table header on the top.
image

Hi Sangay,

The best solution will be to use javascript, but let’s try a simple approach first and see how it works for you.
You can get an example of this working here: Pure CSS Scrollable Table with Fixed Header

In principiple, you can fix the header by setting overflow:auto to the tbody:

table tbody {
overflow:auto;
}

Let me know if that helps

Hello,
Thank you for your prompt reply.

Sir,
If time permits, could you look into my html file.

We tried doing it but cells are not aligning as per the header.

Thank you

(Attachment morbidity new.html is missing)

I think the attached file is missing

Sir,
Can I have your personal email id because HTML file format is not authorized.

Hi Sangay,

Rather than fixing for HTML, I would prefer to show you a working an example and then you can go through it and apply it to your case. The principles applied should be the same. I have created a custom form here:
https://play.dhis2.org/2.34.1/dhis-web-maintenance/index.html#/edit/dataSetSection/dataSet/tZtPrCfBSz8

Looking at your case, I think you will have problems due to the use of rowspan and colspan. I actually tried to make it work and did not manage.

I hope this can help.

I cannot devote more time to this because this is not a DHIS2 related question, but more an HTML related question. I suggest you ask in StackOverFlow. Here people have found a solution for this:

Good luck :slight_smile:

Sir,
Thank you for your quick response and support.