自举折叠整表

Question

我知道有一种方法可以在引导中折叠表行，例如这。但是，我是否有可能有一个按钮/链接/等等，我可以点击，这会折叠整个表，而不仅仅是表行？

我目前正在构建基于数据库信息的表，这些表可能会变得相当大。如果我有4-5个表，我希望用户是aple，根据他/她的选择折叠/展开这些表。

这有可能吗？当我搜索时，我似乎找不到任何答案。

Answer 1

我可以提供两种解决方案，JQuery和Bootstrap。

如果您对JQuery解决方案敞开心扉，请看一看。

JQUERY解决方案

<div class="collapsable">
   <table>
      <tr><td> word </td><td> another word </td></tr>
      <tr><td> word </td><td> another word </td></tr>
    </table>
</div><br />
<button> Click me </button>

CSS

table, th, td
{
    border: 1px solid black;
}

JQuery

$("button").on("click", function()
{
    $(".collapsable").slideToggle();
});

小提琴使用一个按钮，您可以上下滑动表以隐藏/显示。

如果您使用的是Bootstra3.0，那么这个示例如何？

自举解

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
      <table>
          <tr><td> word </td><td> another word </td></tr>
          <tr><td> word </td><td> another word </td></tr>
      </table>
  </div>
</div>

CSS

和上面一样。

靴带塌陷垫

Answer 2

像这样的信息？使用引导手风琴：http://jsfiddle.net/swm53ran/30/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Table 1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Bob</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

您可以添加css使表本身的面板可折叠：

.panel-body {
    padding:0px;
}
.table {
    margin-bottom:0px;
}