嵌套表格行 HTML答案

【问题标题】：Nested Table rows HTML嵌套表格行 HTML
【发布时间】：2020-10-14 05:33:25
【问题描述】：

我正在使用一个动态表，该表的每一行都是一个人的注册，每个人都有很多文件必须显示在他们的注册下方。下图是 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 表格呈现如下：

如何修复我的代码以使表格呈现像第一张图片一样？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您必须将“内部”表插入到<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

【讨论】：