Below is an HTML table that I have created:
<table id="customers" class="table table-bordered" width="100%">
<thead>
<tr>
<th colspan="2">Activities</th>
<th>Mon 17</th>
<th>Tue 18</th>
</thead>
<tr>
<td colspan="2" rowspan="2">Session 1</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Session 2</td>
<td>Session 2.1</td>
<td></td>
</tr>
<tr>
<td>Session 2.2</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="1">Session 3</td>
<td></td>
<td></td>
</tr>
</table>
I want the entire first column ('Activities') to remain fixed while scrolling horizontally.
I attempted to achieve this through CSS but it didn't work as expected, especially if I add more columns to the right since the dates will also move.
.tableFixHead { overflow-x: auto; width: 150px; }