Bootstrap 中的可扩展表行

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。当用户单击 > 时，我想展开该行。此时，应该会出现更多行来显示每个订单的详细信息。例如，如果我展开中间行，我应该会看到以下内容：

+-----------------------------------------------------------------+
    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:table-row覆盖它是正常的display:block..

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

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