0
277
ViewsNo se puede hacer una tabla con filas anidadas en las que se puede hacer clic
Editado-
Estoy tratando de hacer una tabla con filas anidadas. Si hago clic en la fila principal, debería expandirse/contraerse para mostrar la fila secundaria.
Aquí está el código que he estado intentando.
https://www.w3schools.com/code/tryit.asp?filename=GUNCLFIZ8JA8
Pero esto no está funcionando. Necesito hacer clic en el padre para abrir el hijo. Y si hago clic en la fila Child, debería abrir la fila child2.
Aquí está la estructura alámbrica como debería verse.
1 answers
Answer question0
Ejemplo actualizado
He agregado relleno para filas secundarias. Una mesa dentro de una mesa no es necesaria para eso.
Tenga en cuenta que esto es solo un ejemplo de HTML y CSS. No tengo tiempo para codificar todo para ti.
Puede que no sea más fácil trabajar con esto que con tablas dentro de tablas, pero probablemente sea más fácil de representar.
table { margin: 10px; padding: 10px; border: 1px solid #0b0; background-color: #080; color: #eee; } th { padding: 5px; border: 1px solid #b0b; background-color: #808; } td { padding: 5px; border: 1px solid #00b; background-color: #008; } tr.tr-child.depth-1 td { padding-left: 20px; } tr.tr-child.depth-2 td { padding-left: 40px; } tr.tr-child.depth-3 td { padding-left: 60px; } tr.tr-child.depth-4 td { padding-left: 80px; } tr.tr-child.depth-5 td { padding-left: 100px; } tr.tr-child.depth-6 td { padding-left: 120px; } tr.tr-child.depth-7 td { padding-left: 140px; } tr.tr-child.depth-8 td { padding-left: 160px; } <table> <tbody> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr class="tr-parent"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="tr-parent tr-child depth-1"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="tr-child depth-2"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="tr-parent"> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="tr-parent tr-child depth-1"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="tr-child depth-2"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </tbody> </table>