Nested table tag in html - html

Question

I'm trying to display a child table whenever user clicks on the parent cell. here is my code snippet.it is working only for the first row after that from the second record it is not loading the data in a table. (displaying plain data) any help that would be great. Thanks!
<table class="table table-borderless table-hover">
<thead>
<tr>
<th> </th>
<th scope="col">student.Id</th>
.............
</tr>
</thead>
<tbody>
#foreach($data as $student)
<tr class="clickable" data-toggle="collapse" id="row{{ $student['id'] }}" data-target=".row{{ $student['id'] }}">
<td>{{ $student['id'] }}</td>
</tr>
#if ($student['subjects'])
<tr>
<td colspan="3">
<table class="table table-sm table-dark collapse row{{ $student['id'] }}">
<thead>
<tr>
<th scope="col">subject.Id</th>
..............
</tr>
</thead>
<tbody>
#foreach($student['subjects'] as $subject)
<tr>
<td>{{$subject['id']}}</td>
</tr>
#endforeach
</tbody>
</table>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>

Answer 1

Your basic table semantics is wrong. To have nested table, the child tableshould go inside a <td>
table,
th,
td {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</td>
</tr>
</table>