To stick the column2 header and body content positions at a same time. Looking for javascript code that uses inner html.
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)`;
});
});
});