嵌套表格行HTML

如何解决嵌套表格行HTML

我正在处理一个动态表，该表的每一行都是一个人的注册表，每个人都有很多文件，必须在其注册表下方显示。下图是html表应该如何工作：

我在项目中使用了bootstrap 3.3，这是我的HTML表代码无法正常工作：

<table class="table table-hover">
   <thead>
      <tr>
         <th></th>
         <th>Nome </th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><strong>#1</strong></td>
         <td>Peter Parker</td>
         <td>
            <button type="button" class="btn btn-warning btn-xs"
               title=" Editar ">
               <span class="glyphicon glyphicon-pencil"></span>
               <!-- Editar -->
            </button>
            &nbsp;
            <button type="button" class="btn btn-danger btn-xs"
            title=" Excluir ">
            <span class="glyphicon glyphicon-trash"></span>
            <!-- Excluir -->
            </button>
         </td>
         <br><br>
         <table class="table table-hover">
            <tbody>
               <tr>
                  <td>XLS</td>
                  <td>file1.xls</td>
                  <td></td>
               </tr>
            </tbody>
         </table>
      </tr>
   </tbody>
   <tfoot>
      <td></td>
      <td></td>
      <td style="line-height: 12.0;">
         <button class="btn btn-primary"
            type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
         <span class="fa fa-plus"></span>
         Add New Member
         </button>
      </td>
   </tfoot>
</table>

上面的代码将HTML表呈现如下：

如何修复代码以使表格呈现得像第一个图像一样？

解决方法

必须将“内部”表插入<td>标记中。

<table class="table table-hover">
   <thead>
      <tr>
         <th></th>
         <th>Nome </th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><strong>#1</strong></td>
         <td>Peter Parker</td>
         <td>
            <button type="button" class="btn btn-warning btn-xs"
               title=" Editar ">
               <span class="glyphicon glyphicon-pencil"></span>
               <!-- Editar -->
            </button>
            &nbsp;
            <button type="button" class="btn btn-danger btn-xs"
            title=" Excluir ">
            <span class="glyphicon glyphicon-trash"></span>
            <!-- Excluir -->
            </button>
         </td>
         <td>
           <table class="table table-hover">
              <tbody>
                 <tr>
                    <td>XLS</td>
                    <td>file1.xls</td>
                    <td></td>
                 </tr>
              </tbody>
           </table>
         </td>
      </tr>
   </tbody>
   <tfoot>
      <td></td>
      <td></td>
      <td style="line-height: 12.0;">
         <button class="btn btn-primary"
            type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
         <span class="fa fa-plus"></span>
         Add New Member
         </button>
      </td>
   </tfoot>
</table>

有关更多信息，请查看HTML5.2: Tabular data