如何在移动版本中隐藏Mysql表列

Question

我想隐藏第二和第三列只有移动。我已经尝试了css像显示没有类名或第二子方法。还有其他的解决方案吗?

这是我的代码'

if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<table style='width:100%'>";
echo "<tr>";
echo "<th>Brand</th>";
echo "<th class='non'>Provider</th>";
echo "<th class='non'>Product</th>";
echo "<th>URL</th>";
echo "</tr>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['Brand'] . "</td>";
echo "<td class='non'>" . $row['Provider'] . "</td>";
echo "<td class='non'>" . $row['Product'] . "</td>";
echo "<td> <a target='_blank' href=".$row['URL'].">game link</a></td>";
echo "</tr>";
}
echo "</table>";
// Close result set
mysqli_free_result($result);
} else{
echo "No records matching your query were found.";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

Answer 1

您可以使用媒体查询将每个tr元素的第二和第三个子元素设置为不显示

下面是代码中的一个简化示例:

@media (max-width: 768px) {
tr>*:nth-child(2),
tr>*:nth-child(3),
tr>*:nth-child(2),
tr>*:nth-child(3) {
display: none;
}
}

<table style='width:100%'>
<tr>
<th>Brand</th>
<th class='non'>Provider</th>
<th class='non'>Product</th>
<th>URL</th>
</tr>
<tr>
<td> $row['Brand'] </td>
<td class='non'> $row['Provider'] </td>
<td class='non'> $row['Product'] </td>
<td> <a target='_blank' href=$row[ 'URL']>game link</a></td>
</tr>
</table>

当然，使用你认为适合移动的最大宽度。