JSFiddle - React, Tailwind, and code Playground

by shoesheill

HTML

<div>
  <table>
    <tr>
      <td class="sticky left">Sticky</td>
      <td class="sticky" colspan="9">How can I make this sticky?</td>
    </tr>
    <tr class="tableBody">
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
      <td>Column 7</td>
      <td>Column 8</td>
      <td>Column 9</td>
      <td>Column 10</td>
    </tr>
  </table>
</div>

CSS

div {
  width: 300px;
  overflow: scroll;
}
.sticky {
  position: fixed;
  left: 50px;
  background: white;
}
.left{
  left:0;
}
tr.tableBody
{
   line-height:50px;
}