Bootstrap table Fix first two column

After Several websites check, I found a solution which works only for one column(the first column)
Just set position:sticky and left:0

th:first-child, td:first-child
  {
    position:sticky;
    left:0px;
    background-color:grey;
  }

As above I tried for second column too

th:first-child, td:first-child
  {
    position:sticky;
    left:0px;
    background-color:grey;
  }

  th:nth-child(2), td:nth-child(2)
  {
    position:sticky;
    left:0px;
    background-color:grey;
  }

But that doesn’t worked perfectly

Second Column scrolls till first column then it sticky
now second column overlapping with first column
Check the current gif