如何在网页上显示多个动态表格

Question

我有一个显示客户订单的 SQL 查询。

我在办公室里有大屏幕显示客户的订单。

我正在使用 boostrap 表来显示订单。问题是一些订单的订单项比其他订单少。所以，这会产生很多空间。

看起来是这样的：

我想显示订单，以免出现空白。我想让桌子自己调整。

我还想在 4 个不同的列中查看布局。

那么如何4列表格；该表可以有不同数量的行，但它们都调整得很好，所以我没有得到任何空白。

这是我的表格 HTML：

 <div class="table-responsive">
            <table class="table table-sm">
              <thead>
                <tr>
                  <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><?php echo $value["test"]?></td>
                  <td><?php echo $value["test"]?></td>
                  <td><?php echo $value["test"]?></td>
                  <td><?php echo $value["test"]?></td>
                  <td><?php echo $value["test"]?></td>
                </tr>
              </tbody>
            </table>

          </div>

Answer 1

您可以使用带有 Bootstrap 的网格系统来定义四个均匀间隔的列，然后使用宽度为 100% 的 DIV 填充每一列。边距底部会在部分之间放置一些空白，但不会尝试对齐每一行。

<div class="container">
  <div class="row">
    <div class="col-sm-3">

      <div style="width:100%; margin-bottom: 10px;">
        <div>Content 1</div>
      </div>
      <div style="width:100%; margin-bottom: 10px;">
        <div>Content 2</div>
      </div>

    </div>
    <div class="col-sm-3">
      ....
    </div>
    <div class="col-sm-3">
      ....
    </div>
    <div class="col-sm-3">
      ....
    </div>
  </div>
</div>