Bootstrap 整体崩溃 table

Question

我知道有一种方法可以在引导程序中折叠 table 行，例如 this。但是我有没有可能有一个button/link/etc。我可以单击它，它会折叠整个 table 而不仅仅是 table 行？

我目前正在根据数据库信息构建 table，这些 table 可能会变得很大。如果我有 4-5 tables，我希望用户能够 collapse/expand 这些 tables 作为 he/she 选择。

这有可能吗？当我 google.

时，我似乎找不到任何答案

Answer 1

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

如果您对 JQuery 解决方案持开放态度，请查看此内容。

JQUERY 解决方案

HTML

<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();
});

Fiddle 使用按钮，您可以将 table 上下滑动到 hide/show。

如果您使用的是 Bootstrap 3.0 那么这个例子怎么样？

BOOTSTRAP 解决方案

HTML

<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

同上

Boostrap collapse Fiddle

Answer 2

如果您可以将表格放在 panel 中（例如使用 Bootstrap 3.2），则可以折叠 panel-body 元素而不使用 javascript.这是一个例子：

<div class="panel panel-primary accordion"> <!-- Panel (collapasable) -->

    <div class="panel-heading"> <!-- Panel head -->
        <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
            Collapse Me On Click!
        </a>           
    </div> <!-- END Panel head -->

    <div id="collapseOne" class="panel-collapse collapse in"> <!-- Collapsable section -->

        <div class="panel-body"> <!-- Panel body -->

            <table>
                <thead>
                    <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                </tbody>

            </table>

        </div> <!-- END Panel body -->

    </div> <!-- END Collapse section -->

</div>

CSS（不是真的需要）：

a {
    color: white;
}

table {
    width: 100%;
}

tr {
   border: solid 1px; 
}

还有一个Fiddle

Answer 3

也许是这样的？使用自举手风琴：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 使可折叠的面板成为 table 本身：

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

Bootstrap 整体崩溃 table

Bootstrap collapsing whole table

html

twitter-bootstrap

JQUERY 解决方案

BOOTSTRAP 解决方案