php - 带有循环 <tr> 的响应式 Bootstrap 表

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 文件发回图像和你可以根据大小放置它们(复杂的解决方案)

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>