Html 引导折叠整张桌子

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

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

---

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

我可以提供两种解决方案，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>

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

JQuery

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

使用按钮可以上下滑动表格以隐藏/显示

如果您使用的是Bootstrap3.0，那么这个例子怎么样

---

引导解决方案 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>

<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

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

同上

---

如果您能够将表格放在

面板中（例如，使用Bootstrap 3.2），那么您可以折叠
面板主体
元素，而无需使用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> 

是这样的吗？使用引导程序：

现在我想，如果没有Javascript，我看不到你能做到这一点，也许HTML5有一个元素可以做到这一点，但老实说，尽管浏览器正在努力适应HTML5，但它仍然没有被广泛接受的范围内的浏览器可用，最肯定的是在今天使用。这真的很好，事实上，我把我的桌子放在一个面板上。我来看看。
.panel-body {
    padding:0px;
}
.table {
    margin-bottom:0px;
}