在大表中添加展开/折叠按钮答案

【问题标题】：Add expand/collapse button in large table在大表中添加展开/折叠按钮
【发布时间】：2021-12-22 00:44:00
【问题描述】：

我有这样的 HTML：

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         th {
         border: 1px solid black;
         border-bottom: 3px solid black;
         text-align: center;
         color: #121111;
         background-color: #59ebbd;
         position: sticky;
         top: 0;
         }
         
         td {
         border: 1px solid grey;
         padding: 2px;
         }

         table {
         border-collapse: collapse;
         table-layout: fixed;
         white-space: nowrap;
         }
 
      </style>
   </head>
   <body>
      <div class="wrapper">
         <table border="0" class="df data">
            <thead>
               <tr>
                  <th>Date</th>
                  <th>count</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>2</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>3</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>4</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>5</td>
                  <td>3 </td>
               </tr>
               <tr>
                  <td>6</td>
                  <td>3</td>
               </tr>
               <tr>
                  <td>60</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

寻找最简单的解决方案来避免在 html 中滚动大型表格 - 我想显示表格中的前 n 行（折叠）并可以访问它的其余部分（展开）。

所以它可以是第 5 行之后的展开/折叠按钮，例如：

我在网上寻找如何做的提示，但我只找到了一个解决方案来折叠/展开表格中的每一行 - 这不是我想要的。当表格超过第 n 行时，我正在寻找解决方案来一次折叠/展开整个表格。

我做过这样的事情： http://jsfiddle.net/nfLhzxb7/

但仍然不知道如何让 5-7 行消失。

【问题讨论】：

标签： python css beautifulsoup

【解决方案1】：

喜欢这个？ https://bbbootstrap.com/snippets/bootstrap-collapsible-expandable-row-table-26382307 请添加更多代码。通常这是在 JavaScript 中完成的

【讨论】：

可以是这样，但一张桌子只需要一个按钮。