Different width for tbody and thead

Question

I have an HTML structure from a legacy application that I have to style as our new application. To do this, I need to add margin only for the body. Therefore, setting the fill in the table will not work, because the title should be as wide as the table.

Here's a little sketch of how it should look:

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

I played with padding and borders of thead element, but the problem is that thead has a lower border that doesn't apply to the right border.

Edit:/ - , . , , , .

, , , tbodys theads, thead.

- , , .

Edit:/ , , , , DOM JS:

Answer 1

display:table tbody .

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

( ).