Question

我正在使用媒体查询来隐藏表格中的某些列。它显示正确的列，但是使用hideMobile类的所有列都堆积在一个列中。

我的CSS：

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

表的代码：

<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>';

谁能看到我在哪里犯了错误？

Answer 1

您的CSS规则有误，显示应为表格单元而不是块。

更改此

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

到

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

您可以参考https://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

CSS存在一个小问题，您的媒体查询块为空，请参见您的代码：

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

}
}

请注意，您在错误的位置关闭了媒体查询。

现在，正确的代码：

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

现在，完整的CSS代码：

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

表列堆积

2 个答案: