为什么嵌套 table 在父 table 之外呈现？

Question

我正在尝试创建具有嵌套 table 的 table 布局。我不明白为什么嵌套 table 在父 table?

之外呈现

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

我错过了什么？

Answer 1

您需要向包含嵌套 table.

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

为什么嵌套 table 在父 table 之外呈现？

Why is nested table rendering outside of parent table?

html

css

html-table

css-tables