Question

我有一个使用Bootstrap 3的网页。在该页面中，我有一个如下所示的表：

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>Order Number</th>
      <th>Order Date</th>
      <th>Total Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&gt;</td>
      <td>1001</td>
      <td>9/29/2016</td>
      <td>$126.27</td>
    </tr>

    <tr>
      <td>&gt;</td>
      <td>1002</td>
      <td>9/27/2016</td>
      <td>$92.15</td>
    </tr>

    <tr>
      <td>&gt;</td>
      <td>1003</td>
      <td>9/01/2016</td>
      <td>$23.55</td>
    </tr>
  </tbody>
</table>

您可以看到此表格的内容here。当用户点击＆gt;时，我想展开该行。此时，应显示更多行以显示每个订单详细信息。例如，如果我展开中间行，我应该看到以下内容：

+-----------------------------------------------------------------+
    Order Number       Order Date                    Total Price
+-----------------------------------------------------------------+
    1001               09/29/2016                    $126.27
+-----------------------------------------------------------------+
    1002               09/27/2016                    $92.15
+-----------------------------------------------------------------+
        Shirt                                        $21.87
+-----------------------------------------------------------------+
        Shoes                                        $70.28
+-----------------------------------------------------------------+                  1003               09/01/2016                    $23.55

+ ---------------------------------------------- ------------------- +

此表中的关键是，当我展开订单时，我试图在订单中显示商品。每个项目都需要在自己的行中。这给我带来了一些挑战。我尝试使用collapse component。但是，这只有在我想显示/隐藏div时才有效。此外，它还能破坏我桌子的造型。

如何在表中显示/隐藏子行，并保持引导样式？

Answer 1

折叠组件应该适合您，只需确保您使用display:block覆盖它的正常display:table-row，这样就可以了。

tr.collapse.in {
  display:table-row;
}

演示：http://www.bootply.com/NKtIQVbETH

Bootstrap中可扩展的表行

1 个答案: