Position sticky not working on table header when overflow is set to scroll / auto

Question

I found lot of solution but nothing worked hence posting this question again. I have a table having horizontal scroll on that. I tried to set the table header sticky, i am able to do it using poition:sticky but scrolling stopped working.

Is there any way to achieve both using css?

Here is a simple Fiddle for your references.

update Instead of adding a scrollbar on table body i need it to behave same with main page scroll. Any pure JS or angular solution is also acceptable for this. Header should be sticky when user will scroll through the page not table .

Answer 1

If you insist on css alone then if you add specified height to your 'responsive' class, the header would stick but only inside the responsive div.

You could achieve that if you'd replace your table element with separated div's for headers and body.

Answer 2

    .responsive {
    width: 400px;
    max-height: 100vh;
    overflow-x: scroll;
}

This can help you in giving you the desired behaviour