I am currently attempting to create a table with horizontal scrolling and snapping behavior for the yellow header columns that span multiple columns. These headers should snap to the end of the red column, while always maintaining alignment at the beginning of the table. However, I seem to be missing something crucial in my implementation. Can anyone point out what it could be?
div {
overflow: auto;
scroll-snap-type: both mandatory;
width: 200px;
/* to force scroll */
}
table {}
table thead .group {
background: yellow;
padding-right: 12px;
background-clip: padding-box;
scroll-snap-align: start;
}
table thead th {
text-align: left;
}
table tbody th {
position: sticky;
left: 0;
white-space: nowrap;
background: red;
scroll-snap-align: start;
}
table tbody td,
table tbody th {
padding-right: 12px;
}<div>
<table>
<thead>
<tr>
<th/>
<th colspan="4" class="group">
Group 1
</th>
<th colspan="4" class="group">
Group 2
</th>
<th colspan="4" class="group">
Group 3
</th>
<th colspan="4" class="group">
Group 4
</th>
</tr>
<tr>
<th/>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<th>Sticky</th>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</tbody>
</table>
</div>