Different width for tbody and thead

Question

I have an HTML structure from an legacy app I have to style like our new app. For this I need to add margin only for the tbody. So setting padding in table won't work because the header should be as wide as the table.

Here's a little sketch what it should look like:

Why do I need that? I have to put two tables side by side and it should look like as there is only one header but two content tables.

I played around with padding and borders of the thead element but the problem is that the thead has a bottom border which isn't applied to the right border.

Edit:/ The picture is about what I want. The two tables are mentioned because that's the reason I want one table to look like that.

Solutions are welcome if they style the table like I showed in the picture or style two tables with two different tbodys and theads like they would have one thead.

What I need are still correct labels for the columns in tbody but the left and the right column should be a little bit wider to stretch it to the whole table.

Edit:/ Because there was some confusion what I meant here is a screenshot of the style I want to accomplish without altering the DOM structure with JS:

Answer 1

set display:table to tbody and use custom width for that easily.

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