I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body.
Here is how my table structure looks:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
...more rows for data...
</tbody>
The table container has CSS properties like:
overflow-x: hidden;
overflow-y: auto;
height: 400px;
I have tried adding position: fixed; to thead or individual th elements, but it causes squishing of the header. What would be the best solution for this problem?