html中的嵌套表格标签

Question

每当用户单击父单元格时，我都会尝试显示子表。这是我的代码 sn-p。它仅适用于第二条记录之后的第一行，它没有将数据加载到表中。 （显示纯数据）任何很棒的帮助。谢谢！

<table class="table table-borderless table-hover">
        <thead>
            <tr>
                <th>&nbsp;</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

您的基本表格语义是错误的。要嵌套table，子table应该进入<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>