Why is nested table rendering outside of parent table?-CodePudding

I'm trying to create a table layout with a nested table. I cannot figure out why the nested table is rendering outside of the parent table?

Here's the CodePen link: 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;
}

What am I missing?

CodePudding user response：

You need to add a colspan atrribute to the td that contains the nested table.

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