How to Hide Mysql table Column in mobile version-CodePudding

i want to hide 2nd and 3rd column in only mobile. I already try with css like display not with class name or 2nd-child method. is there any other solutions?

This is My code `

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);
    }

CodePudding user response：

You can use a media query to set the 2nd and 3rd children of each tr element to not display

Here's a simplified example from your code:

@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>

Of course use whatever max-width size you deem to be mobile.