Why data-sticky-last-left-td has element.style `left: 150px;`

[tqdo]

I am trying to make 2 columns left-sticky. The first column is fine, but for some reasons the 2nd one is not right next to the first one. Instead for some reasons it has style left:150px; and ends up on top of the 3rd column, which is not sticky.

I tried to set left:auto !important for the 2nd column but it is no longer sticky. Really appreciate any help.

[sidney-reis]

@tqdo I'm having the exact same issue. Were you able to solve it?

[alextrastero]

I'm afraid the magic behind a sticky table is that the sticky column cells needs to have a defined width, so each cell has 150px of width and each sticky element has left: 0 150 300 etc

[hyperactivepuss]

my workaround was

div[role="row"] {
          width: calc(2400px - 98px) !important;

          div[role="columnheader"]:nth-child(1),
          div[role="cell"]:nth-child(1) {
            position: sticky;
            left: 0;
            width: 52px !important;
          }

          div[role="columnheader"]:nth-child(2),
          div[role="cell"]:nth-child(2) {
            left: 52px !important;
          }

          div[role="columnheader"]:nth-child(3),
          div[role="cell"]:nth-child(3) {
            left: 202px !important;
          }

          div[role="columnheader"]:nth-child(4),
          div[role="cell"]:nth-child(4) {
            left: 352px !important;
          }
        }

[RwwL]

Hmm... https://github.com/GuillaumeJasmin/react-table-sticky/issues/26 .. maybe w/ multiple sticky columns provided, they all need a fixed width? That would sort of make sense to me based on comments seen there