2

I have bellow an HTML table I 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>

What I'm trying to do is make the entire first column ('Activities') to be fixed while scrolling horizontally.

I tried this using CSS but didn't work even if I add more number of columns to right because I will have move date to the right.

.tableFixHead { overflow-x: auto; width: 150px; }
Elijah Mock
  • 587
  • 8
  • 21
Elite user
  • 101
  • 1
  • 10
  • 2
    https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b – epascarello Apr 15 '20 at 01:40

2 Answers2

1

It will take some tweaking, but I've successfully done a "sticky column" by using position: sticky on the table cells you'd like to stay in place:

#customers td:nth-child(1),
#customers th:nth-child(1) {
  position: sticky;
  left: 0;
}

This lets things horizontally scroll underneath the first column.

Jacob
  • 77,566
  • 24
  • 149
  • 228
0

They key is to use position: fixed on the row you want to stick to the screen. You can achieve this with little CSS in your example:

thead tr {
  position: fixed;
}

However, you might have to adjust the CSS and the HTML given what else is on the screen.

Here is a CodePen with a more extended example: https://codepen.io/yvesgurcan/pen/oNjjrdN

Yves Gurcan
  • 1,096
  • 1
  • 10
  • 25