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

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>