Unwanted shifting using fixed column and rowspan in table - html

Question

I have a table that uses rowspan for one of the table headers. This table also switches to a fixed column style on smaller sizes. The issue I'm running into is on smaller sizes, when the th with the rowspan becomes fixed, it messes up the structure of the remaning th.
A solution I thought of was to just have an empty th above Foods so I didn't have to use a rowspan, but due to ADA requirments, that's not an option.
Here's some code: CODEPEN
This is the large screen view - you can see there's a Foods column as well as two groups, each of which containing two columns.
Here's a view of when it goes to the fixed column layout. You can see that Group 1 - Col 1 now takes the place where Foods used to be, and the entire 2nd shifted.
HTML:
<div class="wrap">
<table>
<thead>
<tr>
<th rowspan="2" class="fixed">Foods</th>
<th colspan="2">Group 1</th>
<th colspan="2">Group 2</th>
</tr>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">Tacos</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td class="fixed">Pizza</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
border: solid 1px black;
border-spacing: 0;
border-collapse: collapse;
width: 900px;
}
th {
vertical-align: bottom;
padding: 5px 10px;
border-left: solid 1px grey;
}
th[colspan="2"] {
border-bottom: solid 1px grey;
}
td {
border-top: solid 1px grey;
}
tbody tr:nth-child(odd) td {
background: grey;
}
.fixed {
border-left: none;
}
#media (max-width: 600px) {
.fixed {
position: absolute;
width: 50px;
left: 0;
}
.wrap {
overflow-x: scroll;
overflow-y: visible;
margin-left: 50px;
}
}

Answer 1

I am not really sure about the issue but it seems to be related to the use of position:fixed. You are removing the elements from the flow so it's like they no more belong to the table making the table algorithm behave strange.
An idea of fix is to consider a extra element that you make visible on small screen to avoid this issue. Basically this element will correct the table layout when you make some of the element position:fixed
* {
text-align: center;
font-weight: normal;
}
table {
border: solid 1px black;
border-spacing: 0;
border-collapse: collapse;
width: 900px;
}
th {
vertical-align: bottom;
padding: 5px 10px;
border-left: solid 1px grey;
}
th[colspan="2"] {
border-bottom: solid 1px grey;
}
td {
border-top: solid 1px grey;
}
tbody tr:nth-child(odd) td {
background: grey;
}
.fixed {
border-left: none;
}
.fix {
padding:0;
border:none;
}
#media (min-width:700px) {
.fix {
display:none;
}
}
#media (max-width: 700px) {
.fixed {
position: absolute;
width: 50px;
left: 0;
}
.wrap {
overflow-x: scroll;
overflow-y: visible;
margin-left: 50px;
}
}
<div class="wrap">
<table>
<thead>
<tr>
<th rowspan="2" class="fixed">Foods</th>
<th colspan="2">Group 1</th>
<th colspan="2">Group 2</th>
</tr>
<tr>
<th class="fix"></th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">Tacos</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td class="fixed">Pizza</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
</tbody>
</table>
</div>
To avoid extra element you can consider pseudo element:
* {
text-align: center;
font-weight: normal;
}
table {
border: solid 1px black;
border-spacing: 0;
border-collapse: collapse;
width: 900px;
}
th {
vertical-align: bottom;
padding: 5px 10px;
border-left: solid 1px grey;
}
th[colspan="2"] {
border-bottom: solid 1px grey;
}
td {
border-top: solid 1px grey;
}
tbody tr:nth-child(odd) td {
background: grey;
}
.fixed {
border-left: none;
}
thead > tr:last-child::before {
content:"";
display:table-cell;
padding:0;
border:none;
}
#media (min-width:700px) {
thead > tr:last-child::before {
display:none;
}
}
#media (max-width: 700px) {
.fixed {
position: absolute;
width: 50px;
left: 0;
}
.wrap {
overflow-x: scroll;
overflow-y: visible;
margin-left: 50px;
}
}
<div class="wrap">
<table>
<thead>
<tr>
<th rowspan="2" class="fixed">Foods</th>
<th colspan="2">Group 1</th>
<th colspan="2">Group 2</th>
</tr>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed">Tacos</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td class="fixed">Pizza</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
</tbody>
</table>
</div>