JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<table>
  <thead>
    <tr>
      <td class="column1 th1">1</td>
      <td class="column2 th2">2</td>
      <td class="column3 th3">3</td>
      <td class="column4 th4">4</td>
      <td class="column5 th5">5</td>
      <td class="column6 th6">6</td>

      <td> a lot more tds </td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="sidebar column1">col 1</td>
      <td class="sidebar column2">col 2</td>
      <td class="sidebar column3">col 3</td>
      <td class="sidebar column4">col 4</td>
      <td class="sidebar column5">col 5</td>
      <td class="sidebar column6">col 6</td>

      <td> a lot more tds </td>
    </tr>
  </tbody>
</table>

CSS

table{
  width: 1200px;
} 
td{
  width:200px;
}
.sidebar{
position: sticky;
}

.column1{
left:0;
}

.column2{
left: 10vw;
}

.column3{
left: 20vw;
}

.column4{
left: 30vw;
}

.column5{
left: 40vw;
}

.column6{
left: 50vw;
}