title: Different width for tbody and thead
body: <p>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.</p>
  
  <p>Here's a little sketch what it should look like:
  <img src="https://i.stack.imgur.com/k6TIJ.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>Edit:/</strong>
  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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>Edit:/</strong>
  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:
  <img src="https://i.stack.imgur.com/7fmpZ.png" alt="enter image description here"></p>