tbody和thead的不同宽度

Question

我有一个来自旧应用程序的 HTML 结构，我必须像我们的新应用程序一样设置样式。为此，我只需要为 tbody 添加边距。因此在表格中设置填充将不起作用，因为标题应该与表格一样宽。

这是一个小草图，它应该是什么样子：

我为什么需要它？我必须并排放置两个表，它应该看起来像只有一个标题但有两个内容表。

我使用了 thead 元素的填充和边框，但问题是 thead 有一个底部边框，它没有应用于右边框。

编辑：/ 图片是关于我想要的。提到这两个表是因为这就是我希望一个表看起来像这样的原因。

如果他们像我在图片中显示的那样对表格进行样式设置，或者使用两个不同的主体和主体设置两个表格的样式，就像他们只有一个主体一样，那么欢迎提出解决方案。

我需要的仍然是 tbody 中列的正确标签，但左列和右列应该稍微宽一点，以将其拉伸到整个表格。

编辑：/ 因为有些混乱，我在这里的意思是我想要在不使用 JS 更改 DOM 结构的情况下完成的样式的屏幕截图：

Answer 1

您的日历实际上是两个子表（包括带有日期名称的标题）。从这个角度来看，在外部表上使用两个带有填充的单元格会给你想要的效果

Answer 2

将display:table 设置为tbody 并轻松使用自定义宽度。

Complete Demo

HTML：

<table>
    <thead>
        <tr><td>Head1</td></tr>
        <tr><td>Head2</td></tr>
    </thead>
    <tbody>
        <tr><td>Body1</td></tr>
        <tr><td>Body2</td></tr>
        <tr><td>Body3</td></tr>
        <tr><td>Body4</td></tr>
    </tbody>
</table>

CSS：

table{
    width: 500px;
background: #808080;
}
thead{
    width: 100%;
text-align: center;
background: #FF6347;
}
tbody{
    display: table;
width: 400px;
margin: 0 auto;
text-align: center;
background: #FFF;
}