表列堆积答案

【问题标题】：Table columns getting stacked表列堆积
【发布时间】：2018-08-25 18:42:23
【问题描述】：

我正在使用媒体查询来隐藏表格中的某些列。它显示了正确的列，但所有使用 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>';

谁能看到我哪里出错了？

【问题讨论】：

标签： php css media-queries

【解决方案1】：

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】：

您的 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

【讨论】：