为什么嵌套table会渲染在父级table元素的外部？

1. 核心问题：HTML结构不符合规范 #

<tr>（表格行）元素的直接子元素仅允许是<td>（普通单元格）或<th>（表头单元格），你直接将嵌套表格放在<tr>标签下，浏览器解析时会自动将这个不合法的元素移出父级表格，因此会渲染在父级表格外部。
修复逻辑：给嵌套表格套一层<td>标签，如果需要嵌套表格占满整行宽度，可给<td>添加colspan="5"属性（父级表格单行共有5个单元格，colspan值对应父级列数即可）。

2. 次要问题：CSS语法错误 #

#nested的样式规则中，height: 100%末尾缺失英文分号，会导致后续的table-layout: fixed属性无法生效。

修复后完整HTML代码 #

<div id="outer">
  <table id="parent">
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>D</td>
        <td>E</td>
        <td>H</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>D</td>
        <td>E</td>
        <td>H</td>
      </tr>
      <tr>
        <!-- 新增td包裹嵌套表格，设置跨列占满整行 -->
        <td colspan="5">
          <table id="nested">
            <tr>
              <td>I</td>
              <td>J</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

修复后完整CSS代码 #

div {
  border: solid 1px gray;
}
table {
  table-layout: fixed;
}
table td {
  border: solid 1px gray;
}
#outer {
  width: 800px;
  height: 600px;
}
#parent {
  width: 100%;
  height: 100%;
}
#nested {
  width: 100%;
  height: 100%; /* 补充分号修复语法错误 */
  table-layout: fixed;
}

内容的提问来源于stack exchange，提问作者Angela B.