Same column size for multiple tables

I need to have the same size for the header column and the table inside the body. It is not possible to add a fixed value, because the amount of columns can depend (creating a xslt to convert a xml to html)

This is a small example to make my point:

    <html>
     <table border="2px">
      <thead>
       <tr>
        <td>Name</td>
        <td>Firstname</td>
       </tr>
      </thead>
      <tbody>
       <table border="2px">
        <tr>
         <td>Vertongen</td>
         <td>Marc</td>
        </tr>
       </table>        
      </tbody>
    </table> 
   </html>

Expected result:

Name     |Firstname|
Vertongen|Marc     |

Actual result:

Name|Firstname|
Vertongen|Marc|

Solution

You can use CSS FluidColumn, you said you can't use fixed widths because you want to expand to more columns, so i added extra columns,

 
   table {
table-layout: fixed;
width: 100%;
 min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
td {
  overflow: hidden;
  white-space: nowrap;
}

 <table border="2px">
      <thead>
       <tr class="ha">
        <td>Name Name Name Name Name</td>
        <td>Firstname</td>
         <td>Name1</td>
        <td>Firstname1</td>
       </tr>
      </thead>
      <tbody>
       <table border="2px">
        <tr >
         <td>Vertongen</td>
         <td>Marc</td>
         <td>Vertongen1</td>
         <td>Marc1</td>
        </tr>
        
       
         </table>      
      </tbody>
    </table>

EDIT

Now you can add what ever length,but when you expand the table, you can view the hidden content too.Which means that if a text in a column is lager then the width, it never overwrites the other column.

Working JSFIDDLE

EDIT 1

You can use "vw". What you have to do is just add font-size: 10px; font-size: 2.5vw; in to your table css. They're the units associated with setting the viewport width.

Working JSFIDDLE