Question

我有一个PHP genreted表，它可以检索数据并动态显示表中的数据。必须根据表格屏幕显示表格数据。

这是我的代码：

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>

“;

在td内部我使用.col-sm-3和各种bootstap方法但是当屏幕尺寸较小时，它不会根据屏幕采用。我无法在表格中看到买方详细信息部分。即使我使用响应式图像类，但在这种情况下使用较少。我想要的只是当屏幕尺寸很小时，图像在一行中，下一行中的产品详细信息和表格中下一行中的买方详细信息。任何人都可以告诉我如何正确地做到这一点......

我可以使用div标签代替<td>代码吗？

Answer 1

在生成的html中使用col-xs-val代替宽度＆lt; = 768px而不是col-sm-val

Answer 2

您必须使用指定的col-xs类，并且图像使用“img-responsive”类，而对于缩略图，您可以使用“img-thumbnail”。

用以下代码替换您的代码：

    <div class='container'>
    <div class='row'><div class='col-xs-3'></div><div class='col-xs-6'><div class='table-responsive'><table border='0' class='table' >

<tr>
<td><img class="img-responsive" src='itempics/$i.jpg'></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-xs-3'></div>
</div>
</div>

如何使用表格

2 个答案: