为什么嵌套表在父表之外呈现？答案

【问题标题】：Why is nested table rendering outside of parent table?为什么嵌套表在父表之外呈现？
【发布时间】：2022-01-12 10:00:41
【问题描述】：

我正在尝试使用嵌套表格创建表格布局。我无法弄清楚为什么嵌套表在父表之外呈现？

这是 CodePen 链接：https://codepen.io/specificporpoise/pen/JjrXdMM

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>
        <table id="nested">
          <tr>
            <td>I</td>
            <td>J</td>
          </tr>
        </table>
      </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;
}

我错过了什么？

【问题讨论】：

标签： html css html-table css-tables

【解决方案1】：

您需要为包含嵌套表的 td 添加一个 colspan 属性。

      <tr>
        <td colspan="5"><!-- add colspan -->
            <table id="nested">
              ...
            </table>
        </td>
      </tr>

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;
}

<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 colspan="5">
        <table id="nested">
          <tr>
            <td>I</td>
            <td>J</td>
          </tr>
        </table>
        </td>
      </tr>
    </tbody>
  </table>

</div>

【讨论】：