Sticky first column on table

Issue

I have the following table https://codesandbox.io/s/aged-wave-uo7dow?file=/src/app/app.component.ts

I can't seem to make the first column to be sticky when scrolling ( I want to always be visible when horizontally scrolling), I tried absolutely position also but the second column goes underneath the first one.

Is there something that I am missing? Such as the td tag cannot be set sticky or so?

Solution

Have you checked the structure of your HTML? The selectors you are applying in your CSS do not match the elements on the page.

On line 58 you are targeting table thead th:first-child but you do not have a <thead> or a <th> in your html.

table thead th:first-child {
   position: sticky;
   left: 0;
   z-index: 2;
}

Should be:

table tr td:first-child {
   position: sticky;
   left: 0;
   z-index: 2;
}

Answered By - Omid