0
279
VistasUnable to make a table with nested clickable rows
Edited-
I am trying to make a table with nested rows. If I click on the parent row it should expand/collapse to show the child row.
Here is the code that I have been trying.
https://www.w3schools.com/code/tryit.asp?filename=GUNCLFIZ8JA8
But this is not working. I need to click on the parent to open child. And if I click on Child row it should open child2 row.
Here is the wireframe how it should look.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Updated example
I have added padding for child rows. A table within a table is not neccessary for that.
Be aware this is just an example HTML & CSS. I don't have time to code the whole thing for you.
This might not be easier to work with than tables within tables but probably easier to render.
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta