为什么这些嵌套元素不尊重HTML层次结构？

Question

JSFiddle here.

在此SSCCE中，有一个<table>元素嵌套在另一个<table>元素中，但它们在网页上呈现的方式不是预计，当我在Google Chrome Inspecter / DevTools中查看时，我注意到两个<table>元素似乎与HTML层次结构处于同一级别。

什么是我在这里失踪了？

.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

嵌套表格时，我认为您需要将内部表格放在td标记内而不是tr标记中。