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>

您可以在此处查看此表的外观.当用户单击>时,我想展开该行.此时,应显示更多行以显示每个订单详细信息.例如,如果我展开中间行,我应该看到以下内容:

+-----------------------------------------------------------------+
    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

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

这个表中的关键是当我扩展订单时,我正在尝试显示订单中的项目.每个项目都需要在自己的行中.这给我带来了一些挑战.我尝试使用折叠组件.但是,这只有在我想显示/隐藏div时才有效.此外,它还可以打破我桌子的造型.

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

Answer 1

坍塌部分应该为你工作,只要确保你重写它的正常display:block使用display:table-row这样的..

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

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