帶有循環的響應式引導表<tr>

Question

我有一個表格，其中每個表格顯示數據庫中的圖像行。 創建表格時，我決定每6個項目（圖片）我要一個新的。 我現在希望該表能夠響應，因此我知道不再可以使用值“ 6”。 我可以使用什么代替該值來確保最適合每個設備？

當前代碼：

 <div class="table-responsive">
 <table class="table" align="center">
 <tbody>
 <?php
 $count = 0;

 $ids =  join("','",$ar);  

  $query = "SELECT DISTINCT(parts_cats.Part_Type) FROM parts_cats ORDER BY Part_Type ASC";
  $result = mysql_query($query);
  while ($show = mysql_fetch_array($result)){ 
    if($count == 6) {
            $count = 0;
            echo "</tr><tr>";
    } ?>

  <td align="center" valign="middle">
    <p align="center"><img src="images/part_icons/hoverover/<?php echo preg_replace('@[^a-zA-Z0-9_:;\(\)\?\|\=!<>+*%-]@', '',$show['Part_Type']); ?>.png" width="130" height="130"  alt="">       </p>
    <p align="center"><?php echo $show['Part_Type']; ?></p>
  </td>

  <?php
  $count++;
 }
 ?>

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

Answer 1

由於您不知道PHP中的屏幕寬度（因為它是服務器端語言），因此有3種解決方案：

First:

您可以使用媒體查詢為圖片段落指定一個CSS ID，並為每個屏幕尺寸指定一個特定的寬度

Second:

您可以創建一個不同的PHP文件來生成圖像表，在您的原始頁面中創建一個Ajax腳本，該腳本通過提供第二個PHP文件的屏幕大小來詢問第二個PHP文件的圖像，然后該PHP文件將圖像發送回去，您可以根據大小（復雜的解決方案）

Third:

您可以使用PHP將圖像列表存儲在javasript數組中，並在正文中查看它們，例如：

<script>
  var images[];
  var i=0;
<?php
  $query = "SELECT DISTINCT(parts_cats.Part_Type) FROM parts_cats ORDER BY Part_Type ASC";
  $result = mysql_query($query);
  while ($show = mysql_fetch_array($result)){ 
  echo 'images[i]="images/part_icons/hoverover/'.preg_replace('@[^a-zA-Z0-9_:;\(\)\?\|\=!<>+*%-]@', '',$show['Part_Type']).'.png"';
  i=i+1;
    } ?>
</script>