Html 如何使列的宽度相同，并在宽度和高度上填充整个空间？

我创建了一个包含表格的页面，表格的宽度和高度应该可以填满整个浏览器窗口。第一行是标题，第二行包含三个单元格：第一个单元格的宽度应与其内容一致（固定），第二和第三个单元格的宽度应相等，并占据所有剩余的宽度和高度空间。问题是，当我通过

标记设置它们的宽度时，它们的宽度呈现不同

下面是一个再现该问题的简单工作示例：

身体{
背景:#中交;；
边际：0px；
}
桌子{
边框间距：15px 0px；
宽度：100%；
身高：100%；
}
特朗斯曼先生{
显示：内联块；
背景：白色；
填充：0px；
边际：0px；
边界半径：5px；
宽度：100%；
身高：98%；
}
标题

一些固定宽度的物体

SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
fffffffff

标题
一些固定宽度的对象
SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
fffffffff

---

这样的结构可以达到您要求的结果。另外，确保在中间部分添加足够的边距，以获得预期的外观。如果我误解了你的问题，请纠正我。

我已经按照评论中的建议，使用CSS

网格成功地解决了这个问题。以下是解决方案：



身体{
背景:#中交;；
利润率：10px；
}
.项目标题{
网格区域：标题；
自我辩护：中心；
填充：1rem；
}
.项目侧栏{
网格区域：侧栏；
填充：1rem；
}
.项目-main-1{
网格区域：主区块-1；
背景：白色；
填充：1rem；
边界半径：5px；
}
.项目-main-2{
网格区域：主区块2；
背景：白色；
填充：1rem；
边界半径：5px；
}
.集装箱{
显示：网格；
网格模板列：自动1fr 1fr；
网格模板行：60px 1fr；
网格模板区域：
“标题”
“侧边栏主块-1主块-2”；
栅柱间隙：15px；
网格行间距：15px；
宽度：100%；
身高：100%；
}
标题
按钮
第一
第二
您是否尝试将这些列（需要具有相同大小的列）绑定到单个div中，然后应用宽度为50%@AravindAnil的相同类，如下所示：
…
？它不会改变外观。或者我只是误解了你？你能举个例子吗？在我开始误导你之前，你有必要将html结构保留为3吗？@AravindAnil实际上我在第二个
中有2个
，还有3个
。不，我只需要外观，其他方法也适用。仅供参考：
valign
是一个不推荐使用的HTML5属性，应该用CSS规则替换。谢谢，在使用
包装两个面板后，几乎实现了所需的外观。如何最好地控制面板之间的距离，以便将其设置为
15px
（如
表格中的
边框间距：
）？我相信您可能需要为第一个面板选择一些相对大小（而不是自动）。问题是其他面板不知道此“自动”设置大小。为了获得这样的灵活性，我强烈建议您使用网格/柔性箱，它将有效地照顾整个可用空间：）感谢您指导我使用
网格
，我能够使用它解决问题。请看我的答案。
<table id="mainTable">
    <col width="auto">
    <col width="auto">
    <tr height="50px" valign="top">
        <td colspan="3" style="text-align: center">
            <h1>Header</h1>
        </td>
    </tr>
   <tr>
      <td valign="top">
         <p style="width:200px">some objects of fixed width</p>
      </td>
      <td valign="top" height="100%">
          <div class="panelsMain" style="width:50%">sssssssssssssssssssssssssssssssssssssss</div>
          <div class="panelsMain" style="width:50%">fffffffff</div>
       </td>
    </tr>
    </table>
</body>
</html>