Html 表中的DIV并没有像它应该的那个样伸展

编辑：似乎最简单的解决方案是将#menu div从容器中取出，但从我刚才处理css表的方式来看，我认为将其放入容器中并为其指定自己的行更有意义。我还是不明白为什么这样不行

我正在学习如何用CSS和HTML在表格中排列我的页面，我遇到了一个我不理解的奇怪问题

我希望#menu div有自己的一行，并延伸到标题的长度。它做得非常完美，但当我在它下面添加一个新行，其中包含我的内容和侧边栏div，我也想将其拉伸到标题的长度时，#菜单宽度被切断，#内容和侧边栏div也不会像我希望的那样横向拉伸

如果听起来有点混乱，只需预览代码，我想做的应该很明显

我觉得我错过了一些简单的东西。我试图做到这一点，没有使用绝对定位，但严格的表布局

有人能看出我做错了什么吗

提前谢谢

html，正文{
保证金：0；
}
标题{
高度：200px；
保证金：10px 10px 0px 10px；
背景颜色：绿色；
}
#餐具柜{
显示：表格；
边界间距：10px；
宽度：100%；
}
.行{
显示：表格行；
}
#菜单{
显示：表格单元格；
背景颜色：绿色；
填充：60px；
垂直对齐：顶部；
}
#边栏{
显示：表格单元格；
背景颜色：绿色；
垂直对齐：顶部；
宽度：50%；
}
#内容{
表单元；
背景颜色：绿色；
垂直对齐：顶部；
宽度：50%；
}
页脚{
背景颜色：绿色；
高度：200px；
保证金：0px 10px 10px 10px；
}

同侧视野
sdf Lorem ipsum dolor sit amet，
sdf的知识来自于对精英的尊重，包括对劳动力和劳动力的临时投入。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。sdf的知识来自于对精英的尊重，包括对劳动力和劳动力的临时投入。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了
sdf的知识来自于对精英的尊重，包括对劳动力和劳动力的临时投入。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在同一个地方，在同一个地方
阿斯达斯

您需要将

表格单元格

替换为

显示：表格单元格在
#content
中。基本上，为了解决这个问题，您需要在
#菜单
上应用列跨越，但不幸的是，CSS还不支持行和列跨越。
您可以在以下位置阅读与此主题相关的进一步讨论：
您需要将
表格单元格
替换为
显示：表格单元格在
#content
中。基本上，为了解决这个问题，您需要在
#菜单
上应用列跨越，但不幸的是，CSS还不支持行和列跨越。
您可以在以下位置阅读与此主题相关的进一步讨论：
您可以将属性
colspan=“value”
与
td
标记一起使用，但不能将其与
div
标记一起使用

<table style="width:100%">
  <tr>
    <th colspan="2">Menu</th>
  </tr>
  <tr>
    <td>Sidebar</td>
    <td>Content</td>
  <tr>
</table>


菜单
边栏
内容

您可以使用flexbox来实现这一点
Flexbox概述
示例您可以将属性
colspan=“value”
与
td
标记一起使用，但不能与
div
标记一起使用

<table style="width:100%">
  <tr>
    <th colspan="2">Menu</th>
  </tr>
  <tr>
    <td>Sidebar</td>
    <td>Content</td>
  <tr>
</table>


菜单
边栏
内容

您可以使用flexbox来实现这一点
Flexbox概述
示例
我想你应该学习如何使用网格。最好是用桌子。还有我给你的原始框架，菜单嵌入标题的唯一原因是它保持在顶部。
要理解你试图使用的我的框架，你必须看到网站有三个部分：页眉、内容和页脚

标题是每一面顶部应显示的所有内容，包括标题和菜单（导航栏）。
页脚是可选的，与页眉相同，页眉在底部显示时总是包含相同的内容。
然而，内容总是变化的。这就是为什么我最初是以身份证而不是班级身份给你的。它是一切的“包装”。类部分是显示不同部分的部分。到目前为止，我一直在关注您的其他问题（如果您愿意，我可能会继续这样做，并成为您的个人指南！）

好的，现在转到当前问题：


html{
保证金：0；
填充：0；
}
身体{
保证金：0；
填充：0；
}
#头衔{
高度：200px；
宽度：自动；
背景颜色：绿色；
裕度：0 10px 0；
}
#菜单{
背景颜色：绿色；
填充：60px；
宽度：自动；
裕度：0 10px 0；
}
#内容{
宽度：100%；
裕度：0 10px 0；
显示：网格；
网格模板列：重复（2，1fr）；
柱间距：10px；
网格自动行：自动；
网格模板区域：
“SectionSidebarLeft SectionSidebarRight”；
}
#部分侧边栏左侧{
填充：10px；
背景颜色：绿色；
网格区域：SectionSidebarLeft；
}
#分段侧栏{
填充：10px；
背景颜色：绿色；
网格区域：SectionSidebright；
}
页脚{
背景颜色：绿色；
高度：