2

Estoy tratando de crear una tabla responsiva donde pueda colapsar o agrupar las columnas con alguna especie de (+), pero solo he conseguido el efecto para las filas pero me gustaria que una tabla muy grande con estos colapsables pueda adaptarlo a la pantalla.

Aquí esta mi código:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-responsive table-hover" border=3>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th align="center">Columna 1</th>
      <th align="center">Columna 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1">
      <td><i class="fa fa-plus" aria-hidden="true"></i></td>
      <td align="center">Fila 1</td>
      <td align="center">63.97</td>
      <td align="center">36.03</td>
    </tr>
  </tbody>
  <tbody id="group-of-rows-1" class="collapse">
    <tr>
      <td></td>
      <td align="center">Campo / Carpa</td>
      <td></td>
      <td align="center">0.40</td>
    </tr>
    <tr>
      <td></td>
      <td align="center">No hay stock</td>
      <td></td>
      <td align="center">7.69</td>
    </tr>
    <tr>
      <td></td>
      <td align="center">Se encuentra en otro lugar exhibido</td>
      <td></td>
      <td align="center">25.51</td>
    </tr>
  </tbody>
</table>

Espero puedan ayudarme.

Saludos.


Voy a añadir mas información, quiero hacer en html una tabla responsiva como la siguiente por ejemplo:

introducir la descripción de la imagen aquí

Aqui en excel tengo una tabla con columnas agrupadas, al hacer clic en el (+) yo puedo visualizar otras columnas:

introducir la descripción de la imagen aquí

Y ahora tengo la opcion de (-) para reducir u ocultar columnas.

Esto obedece a que en una parte de la pagina mostrare demasiada informacion en una tabla y me gustaria que ocultaran y desocultaran lo que necesitan de datos de la tabla.

Espero haber sido mas claro.

Gracias.

3
  • ¿La libreria DataTables no te sirve?
    – EvilFearzZ
    Commented el 6 may. 2022 a las 22:21
  • No consigo visualizar lo que quieres... ¿puedes hacer algun dibujo o esquema o algo donde se puedan ver donde quieres poner los botones para eso y explicar lo que haran al pulsarlos?
    – masterguru
    Commented el 7 may. 2022 a las 5:20
  • He añadido un comentario con mas información al respecto para completar la pregunta. Commented el 9 may. 2022 a las 12:10

1 respuesta 1

0
No entendí bien tu pregunta pero creo que es algo así lo que quieres:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-responsive table-hover" border=3>
  <thead>
    <tr>
      <th class="text-center text-primary" data-toggle="collapse" data-target=".group-of-rows-1" >+</th>
      <th></th>
      <th class="text-center text-primary">Columna 1</th>
      <th class="text-center text-primary collapse group-of-rows-1">Columna 2</th>
    </tr>
  </thead>
  <tbody> 
    <tr>
      <td><i class="fa fa-plus" aria-hidden="true"></i></td>
      <td align="center">Fila 1</td>
      <td align="center">63.97</td>
      <td align="center" class="collapse group-of-rows-1">36.03</td>
    </tr>
  </tbody>
  <tbody >
    <tr>
      <td></td>
      <td align="center">Campo / Carpa</td>
      <td></td>
      <td align="center"  class="collapse group-of-rows-1">0.40</td>
    </tr>
    <tr>
      <td></td>
      <td align="center">No hay stock</td>
      <td></td>
      <td align="center"  class="collapse group-of-rows-1">7.69</td>
    </tr>
    <tr>
      <td></td>
      <td align="center">Se encuentra en otro lugar exhibido</td>
      <td></td>
      <td align="center"  class="collapse group-of-rows-1">25.51</td>
    </tr>
  </tbody>
</table>

4
  • Es algo asi, me gustaria que en cada columna o grupo de columnas haya un mas arriba (+) y me permita ocultar o desocultar partes de la tabla. Commented el 8 may. 2022 a las 18:05
  • Si te fijas bien y ejecutas el código observarás que logre ocultar y mostrar la columna 2. Para hacerlo con partes de una tabla hay que saber específicamente que partes de la tabla son. No crees tu?. Creo que en este caso debes formular bien la pregunta! Commented el 9 may. 2022 a las 2:09
  • He añadido un comentario con mas información al respecto para completar la pregunta. Commented el 9 may. 2022 a las 12:09
  • Esta respuesta es la forma correcta de collapse en columnas con Bootstrap. Ahora bien, se nota que lo quieres lograr hacer es con datos dinámicos y eso ya es a nivel de programación con el lenguaje que uses ejem (Php,Laravel,Javascript). El botón si lo quieres encima puedes cambiarlo. Recuerda que no siempre vas a obtener la repuesta de los problemas, pero sí un indicio que puede ayudarte a resolverlo. Commented el 9 may. 2022 a las 15:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.