I have a PHP generated table that retrieves data and dynamically displays it in a table. It is crucial to ensure that the table data adjusts according to the screen size.
Below is the code snippet:
echo "<div class='container'><div class='row'><div class='col-sm-3'></div><div class='col-sm-6'><div class='table-responsive'><table border='0' class='table' >
<tr>
<td><img src='itempics/$i.jpg' width=200 height=200></td>
<td><h3>Product Details:</h3><b>Product:</b> ".$arr['pname']."<br>
<b>Item No:</b> ".$arr['itemno']."<br>
<b>Price:</b> ".$arr['price']."<br>
<b>Size:</b> ".$arr['size']."<br></td>
<td><h3>Buyer Details:</h3><b>Buyer:</b> ".$arr['uname']."<br>
<b>Account No:</b> ".$arr['ac_no']."<br>
<b>Mobile No:</b> ".$arr['mob_no']."<br>
<b>Address:</b> ".$arr['add']."<br>
<b>Bank:</b> ".$arr['bank']."<br>
<b>City:</b> ".$arr['city']."<br>
<b>Order No:</b> ".$arr['order_no']."<br></td>
</tr>
</table>
</div>
</div>
<div class='col-sm-3'></div>
</div>
</div>
";
The .col-sm-3 class and other Bootstrap methods used within the td are not responsive enough for smaller screens, resulting in the Buyer Details section not displaying properly in the table. Responsive image classes also do not help in this case. The desired layout is to have the image on one row, Product details on the next row, and Buyer details on another row when the screen size is small. Is there a way to achieve this by using <div> tags instead of <td> tags?