为啥嵌套表在父表之外呈现？

Posted 2023-03-06

【中文标题】为啥嵌套表在父表之外呈现？

【英文标题】：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;

我错过了什么？

【参考方案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>