来自 php 数组的自适应表-解网

问：

我正在尝试从视频库的 php 数组创建一个自适应表。我发现许多示例适用于我创建自适应表和从数组创建表，但我无法从数组创建自适应表。

我的数组是分页的，一次显示 10 个结果。每个结果都是一个视频缩略图，并希望表格在一行上显示五列，然后再在下一行上显示，并自动适应移动屏幕，使其只有一列，其中所有行都在分页结果中。

我拼命想让这有意义，所以请和我一起裸露，我会回答提出的任何问题。

我目前的配置（简单示例不是自适应的）没有按照我想要的方式工作是：

<table>
<td>
<table>
<tbody>
<tr>
<?php foreach ($data as $row)) { ?>
<td>
<a href="#">
<video autoplay muted width="200" preload="metadata">
<source src="/vid/<?php echo $row['source']; ?>#t=1,10" type="video/mp4">
</video>
</a>
</td>
<?php } ?>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>

和输出：

应该在 5 张图像后返回新行

您可以查看结果从屏幕上运行，并且不会返回下一行。

在移动版本中，它只是缩小所有内容以适应：

缩小 eveything

我知道它最终会变得简单，但我对表格很糟糕，只是不明白如何让它工作。

感谢您在使表格以这种方式响应方面提供的任何帮助。

更新成员 Luuk 提供的答案与预测完全一样......Chrome 浏览器除外。有人知道为什么吗？

新更新的代码片段是。

<!DOCTYPE html>
        <html>
        <head>
        <style>
        * {
          box-sizing: border-box;
        }
        
        .column {
          float: left;
          width: 33.33%;
          padding: 5px;
        }
        
        /* Clearfix (clear floats) */
        .row::after {
          content: "";
          clear: both;
          display: table;
        }
        
        /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 500px) {
          .column {
            width: 100%;
          }
        }
        </style>
        </head>
        <body>
        
        <h2>Responsive "Side-by-Side" Images</h2>
        <p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
        <p>Resize the browser window to see the effect.</p>
        
        <div class="row">
          <div class="column">
        <?php foreach ($data as $row) { ?>
            <a href="/video.php?viewkey=<?php echo $row['id']; ?>">
            <video autoplay muted width="200" preload="metadata">
            <source src="/vid/<?php echo $row['source']; ?>#t=1,10" 
            type="video/mp4">
            </video>
            </a>
        <?php } ?>
          </div>
        </div>
        
        </body>
        </html>

自适应示例

php html css 布局响应式设计

来自 php 数组的自适应表

Adaptive table from php array

评论