Why don't these nested <table> elements respect HTML hierarchy?

问题:

JSFiddle here.

In this SSCCE, there is a <table> element nested inside another <table> element, but the way they render on the web page is not as expected, and when I checked in the Google Chrome Inspecter/DevTools, I noticed that the two <table> elements are appearing to be at the same level of the HTML hierarchy.

What am I missing here?

.outer-table {   border: 2px solid orange; } .outer-table th {   border: 2px solid red; } .inner-table tr {   border: 2px solid blue; } .inner-table td {   border: 2px solid green; } table {   width: 100%; } tr {   width: 100%; } th, td {   width: 33.33333%; } tfoot td {   width: 100%; } th {   padding: 20px; } td {}

<table class="outer-table">      <thead class="outer-table-head">     <tr>       <th>First Name</th>       <th>Last Name</th>       <th>Phone</th>     </tr>   </thead>      <tbody class="outer-table-body">     <tr>       <table class="inner-table">         <tbody>           <tr>             <td>               <input type="text" />             </td>             <td>               <input type="text" />             </td>             <td>               <input type="text" />             </td>           </tr>         </tbody>         <tfoot>           <tr>             <td>               <button class="remove-button">Reset</button>               <button class="add-button">Save</button>             </td>           </tr>         </tfoot>       </table>     </tr>   </tbody>    </table>

回答1:

When nesting tables, I believe you need to place the inner table inside a td tag rather than a tr tag.

文章来源: Why don't these nested elements respect HTML hierarchy?