how to make expandable td

Question

someone can tell me how i can make this td of "sintomas" expandable with js or css? and I want when it is expanded it will overlap the others without affecting the heights and widths here the image of what I want to do

  <tr class="hola">
            <td>2</td>
            <td>lautaro</td>
            <td>barrera</td>
            <td>lautarobarrera574@gmail.com</td>
            <td>sa12312</td>
            <td>3541219667</td>
            <td> <img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39091/preview.png" alt="" style="height:9px;margin-right:10px">holaaaaaaaaaaaaaaaaaaaaadasdsadasdad </div></td>
            <td>Aceptado</td>
            <td>2022-06-27</td>
            <td>07:50:00</td>
            <td><a href="turno/2">Ver</a></td>
            <td><a href="editar/2">Editar</a></td>
            <td><a href="eliminar/2">Eliminar</a></td>

        </tr>

Answer 1

You have to create an element with position: absolute and set it's top position through javascript based on the position of table row clicked.

Below is a demo of how you can accomplish this:

<html>
  <head>
    <style>
      body {
        position: relative;
      }
      
      
      .expandable {
        display: none;
        position: absolute;
        background-color: #ccc;
        left: 0;
        right: 0;
        margin: 0;
      }
      
      .expandable.active {
        display: block;
      }
    </style>
  </head>
  <body>
    
    <table>
      <tbody>
        <tr class="hola">
            <td>2</td>
            <td>lautaro</td>
            <td>barrera</td>
            <td>lautarobarrera574@gmail.com</td>
            <td>sa12312</td>
            <td>3541219667</td>
            <td> <img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39091/preview.png" alt="" style="height:9px;margin-right:10px">holaaaaaaaaaaaaaaaaaaaaadasdsadasdad </div></td>
            <td>Aceptado</td>
            <td>2022-06-27</td>
            <td>07:50:00</td>
            <td><a href="turno/2">Ver</a></td>
            <td><a href="editar/2">Editar</a></td>
            <td><a href="eliminar/2">Eliminar</a></td>
        </tr>
        <tr class="hola">
            <td>2</td>
            <td>lautaro</td>
            <td>barrera</td>
            <td>lautarobarrera574@gmail.com</td>
            <td>sa12312</td>
            <td>3541219667</td>
            <td> <img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39091/preview.png" alt="" style="height:9px;margin-right:10px">holaaaaaaaaaaaaaaaaaaaaadasdsadasdad </div></td>
            <td>Aceptado</td>
            <td>2022-06-27</td>
            <td>07:50:00</td>
            <td><a href="turno/2">Ver</a></td>
            <td><a href="editar/2">Editar</a></td>
            <td><a href="eliminar/2">Eliminar</a></td>
        </tr>
        <tr class="hola">
            <td>2</td>
            <td>lautaro</td>
            <td>barrera</td>
            <td>lautarobarrera574@gmail.com</td>
            <td>sa12312</td>
            <td>3541219667</td>
            <td> <img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39091/preview.png" alt="" style="height:9px;margin-right:10px">holaaaaaaaaaaaaaaaaaaaaadasdsadasdad </div></td>
            <td>Aceptado</td>
            <td>2022-06-27</td>
            <td>07:50:00</td>
            <td><a href="turno/2">Ver</a></td>
            <td><a href="editar/2">Editar</a></td>
            <td><a href="eliminar/2">Eliminar</a></td>
        </tr>
        <tr class="hola">
            <td>2</td>
            <td>lautaro</td>
            <td>barrera</td>
            <td>lautarobarrera574@gmail.com</td>
            <td>sa12312</td>
            <td>3541219667</td>
            <td> <img src="https://d29fhpw069ctt2.cloudfront.net/icon/image/39091/preview.png" alt="" style="height:9px;margin-right:10px">holaaaaaaaaaaaaaaaaaaaaadasdsadasdad </div></td>
            <td>Aceptado</td>
            <td>2022-06-27</td>
            <td>07:50:00</td>
            <td><a href="turno/2">Ver</a></td>
            <td><a href="editar/2">Editar</a></td>
            <td><a href="eliminar/2">Eliminar</a></td>
        </tr>
      </tbody>
    </table>
    
    <div class="expandable">
      This content was expanded
    </div>
    
    <script>
      const tableRows = document.querySelectorAll(".hola");
      const expandable = document.querySelector(".expandable");
      
      for(var i = 0; i < tableRows.length; i++) {
        const tableRow = tableRows[i];
        
        tableRow.addEventListener("click", (event) => {
          const position = event.target.getBoundingClientRect();
          
          expandable.classList.toggle("active");
          expandable.style.top = position.bottom;
        });
      }
    </script>
  </body>
</html>

how to make expandable td

Question

1 answers

solution1
0 2022-07-05 14:54:02

how to make expandable td

Question

1 answers

solution1 0 2022-07-05 14:54:02

solution1
0 2022-07-05 14:54:02