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

Posted 2021-03-27

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

我在办公室里有大屏幕，我正在向客户展示订单。

我正在使用bootstrap表来显示订单。问题是某些订单的订单项数量少于其他订单。所以，这创造了很多空间。

这是它的样子：

我想显示订单，所以我不会得到空的空间。我想让桌子调整自己。

我还想在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>

答案

您可以使用带有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>