表列堆积

I am using media queries to hide certain colums in my table. It is displaying the correct columns but all columns using the hideMobile class are getting stacked in a single column.

My css:

.hideMobile {
  display:block;
}
.hideDesktop {
  display:none;    
}
.hideMobile {
  display:none;
}
.hideDesktop {
  display:block;    
}

And the code for the table:

<table class="table table-hover" border="0" width="100%">
  <tr>
    <th>#</th>
    <th></th>
    <th>Team</th>
    <th>G</th>
    <th class="hideMobile">W</th>
    <th class="hideMobile">G</th>
    <th class="hideMobile">V</th>
    <th class="hideMobile">+</th>
    <th class="hideMobile">-</th>
    <th class="hideMobile">-P</th>
    <th class="hideDesktop">+/-</th>
    <th>P</th>
  </tr>    
echo '<tr>';
echo '<td>' . $programma_output[$i]["positie"] . '</td>';
echo '<td>' . $programma_output[$i]["logo"] . '</td>';
echo '<td>' . $programma_output[$i]["teamnaam"] . '</td>';
echo '<td>' . $programma_output[$i]["gespeeldewedstrijden"] . '</td>';
echo '<td class="hideMobile">' . $programma_output[$i]["gewonnen"] . '</td>';
echo '<td class="hideMobile">' . $programma_output[$i]["gelijk"] . '</td>';
echo '<td class="hideMobile">' . $programma_output[$i]["verloren"] . '</td>';
echo '<td class="hideMobile">' . $programma_output[$i]["doelpuntenvoor"] . '</td>';
echo '<td class="hideMobile">' . $programma_output[$i]["doelpuntentegen"] . '</td>';
echo '<td class="hideMobile">' . $programma_output[$i]["verliespunten"] . '</td>';
echo '<td class="hideDesktop">' . $programma_output[$i]["doelsaldo"] . '</td>';
echo '<td>' . $programma_output[$i]["punten"] . '</td>';
echo '</tr>';
echo '</table>';

Can anyone see where I made a mistake?

Your CSS rules are wrong, display should be table-cell not block.

Change this

.hideMobile {
  display:block;
}
.hideDesktop {
  display:none;    
}
.hideMobile {
    display:none;
}
.hideDesktop {
  display:block;    
}

to

.hideMobile {
  display:table-cell;
}
.hideDesktop {
  display:none;    
}
.hideMobile {
  display:none;
}
.hideDesktop {
  display:table-cell;    
}

You can refer to https://www.w3schools.com/cssref/pr_class_display.asp

CSS with a small problem, your media query block is empty, see your code:

@media screen and (max-width: 800px) {
}
.hideMobile{
    display:none;
}
.hideDesktop{
        display:block;

}
}

Note you are closing the media query in the incorrect place.

Now, the correct code:

@media screen and (max-width: 800px) {
    .hideMobile{
      display:none;
    }
    .hideDesktop{
      display:block;
    }
}

Now, the full css code:

.hideMobile{
    display:block;
}
.hideDesktop{
    display:none;
}
@media screen and (max-width: 800px) {
    .hideMobile{
        display:none;
    }
    .hideDesktop{
        display:block;
    }
}