Show user list that looks like eCommerce product list format in php

Question

I am creating User management system dashboard, where I want to show my user list like e-commerce website products list

My php code is.

<?php  
 $connect = mysqli_connect("localhost", "root", "xxxxx", "xxxxx");  
 $query = "SELECT * FROM users";  
 $result = mysqli_query($connect, $query);  
 ?> 


       <div  style="width:700px;">  
            <div class="table-responsive">  
                 <table class="table table-bordered">  
                      <tr> 

                           <th width="20%">Location</th> 
                           <th width="20%">Employee Name</th>  
                           <th width="30%">Last Login</th>
                           <th width="30%">View</th>  
                      </tr>  

                      <?php  

                      while($row = mysqli_fetch_array($result)) 

                      {  

                      ?>  

                      <tr> 
                          <td><?php echo $row["Location"]; ?></td> 
                           <td><?php echo $row["userName"]; ?></td>
                           <td><?php echo $row["session"]; ?></td>  
                           <td><input type="button" name="view" value="view" id="<?php echo $row["userEmail"]; ?>" class="btn btn-info btn-xs view_data" /></td>  

                      </tr>  

                      <?php  
                      }  
                      ?>  

                 </table>  
            </div>  
       </div> 

I want my Users output should look like dynamically.

User-1 | User 2   | User 3   | User 4
User-5 | User 6   | User 7   | User 8
User-9 | User 10  | User 11  | User 12 

Please help.

Answer 1

Don't use a table for structuring your website/webapp. You can achieve a responsive design easily by using for example Bootstrap. You should use Bootstrap's grid system .

You can use something like this:

<div class='container'>
 <div class=row>
   <div width="20%">Location</div> 
   <div width="20%">Employee Name</div>  
   <div width="30%">Last Login</div>
   <div width="30%">View</div>  
 </div>
  <?php  
      while($row = mysqli_fetch_array($result)) 
      {
        echo "<div class='col-md-4'>".$yourDataHere."</div>
      }
  ?> 
</div>