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

Question

JSFiddle here.

This SSCCE has a <table> element nested in another <table> element, but the way they display on the web page is not as expected, and when I checked in Google Chrome Inspecter / DevTools, I noticed that there were two elements <table> appear at the same level in 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> 

Answer 1

When inserting tables, I believe that you need to put the internal table inside the td tag, not the tr tag.