Fix the column position

[dhivya_dv]

To stick the column2 header and body content positions at a same time. Looking for javascript code that uses inner html.

[THANGAPANDIAN]

HTML

<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <!-- ...more headers... -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <!-- ...more cells... -->
    </tr>
    <!-- ...more rows... -->
  </tbody>
</table>

Javascript Code

window.addEventListener('load', function () {
  const table = document.getElementById('myTable');
  const column2Cells = table.querySelectorAll('tbody td:nth-child(2)');
  
  window.addEventListener('scroll', function () {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    column2Cells.forEach(cell => {
      cell.style.transform = `translateY(${scrollTop}px)`;
    });
  });
});