Table Columns not displaying on IOS Safari

I have a table which has the first two columns fixed and the rest can scroll horizontally. The table is working fine on Android and other devices but on IOS the first two columns does not appear. The content is there because I have touch events attached to them that are working perfect but the content is just not visible. I have tried playing around with the z-index but no luck. Can anyone please help me out.

The CSS for the fixing the first two columns and making the rest scroll is

  table.leaderboard {
    table-layout: auto;
  }
  
  .hard_left {
    position: absolute;
    left: 0;
    width: 30px;

  }
  .next_left {
    position: absolute;
    left: 30px;
    width: 175px !important;
    
    background: #13cf00;

  }
  
  .outer {
    position: relative;
  }
  
  .inner {
    overflow-x: scroll;
    overflow-y: visible;
    margin-left: 205px;

  }
  

where hard_left is applied to the first column and next_left is applied to the second column.

This is how the table is structured.

<div class="outer">
 <div class="inner">
  <table>
   <thead>
    <tr>
     <th class="hard_left">
     <th class="next_left">
     <th>....
    <tr>
   </thead>
   <tbody>
    <tr>
     <th class="hard_left">
     <th class="next_left">
     <th>....
    <tr>
   </tbody>
 </div>
</div>