表列堆积

Question

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?

Answer 1

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