tbody和thead的宽度不同

Question

我有一个遗留应用程序的HTML结构，我必须像我们的新应用程序一样。为此我需要为tbody添加保证金。因此，在表格中设置填充将不起作用，因为标题应该与表格一样宽。

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

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

我玩了填充和thead元素的边框，但问题是thead有一个底部边框，不适用于右边框。

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

如果他们像我在图片中所展示的那样设置表格，或者使用两个不同的tbodys和theads样式两个表格，就像他们会有一个thead那样，欢迎使用解决方案。

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

修改：/ 因为有一些混乱我在这里的意思是我想要完成的样式的截图，而不用JS改变DOM结构：

Answer 1

将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;
}

Answer 2

您的日历实际上是两个子表（包括带有日期名称的标题）。从这个角度来看，在外表上使用两个带填充的单元格可以获得所需的效果