Блог

Главная - Вопросы по программированию - Добавить кнопку развернуть/свернуть в большую таблицу

Добавить кнопку развернуть/свернуть в большую таблицу

#python #css #beautifulsoup

Вопрос:

У меня есть такой 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 рядов исчезающими.

Ответ №1:

Как этот? https://bbbootstrap.com/snippets/bootstrap-collapsible-expandable-row-table-26382307 пожалуйста, добавьте еще немного кода. обычно это делается в JavaScript

Комментарии:

1. это может быть так, но нужна только одна кнопка для одного стола.

Метки: