Align separate tables horizontally

Question

I have a number of dynamically generated tables that should align horizontally. Tables columns are grouped together and have a group name most of the time. But when they don't, I cannot get the tables to align horizontally, the table head minimum height isn't respected. My code:

<table >
    <thead>
        <tr>
            <th colspan="2">
                    col group 1
            </th>

            <th colspan="2">
                    col group 2
            </th>            
        </tr>    
        <tr class="title">
            <th>#</th>
            <th>Columna</th>
            <th>Relative</th>
            <th>Isso</th>
        </tr>
    <thead>
    <tbody>    
        <tr>
            <td>1</td>
            <td>This</td>
            <td>Column</td>
            <td>Is</td>
        </tr>
    </tbody>
</table>


<table >
    <thead>
        <tr>
            <th colspan="2">

            </th>

            <th colspan="2">

            </th>            
        </tr>    
        <tr class="title">
            <th>#</th>
            <th>Columna</th>
            <th>Relative</th>
            <th>Isso</th>
        </tr>
    <thead>
    <tbody>    
        <tr>
            <td>1</td>
            <td>This</td>
            <td>Column</td>
            <td>Is</td>
        </tr>
    </tbody>
</table>

And CSS:

th,td{
    padding:0.8em;
    border: 1px solid;
}
tr.title th{
    background-color:#6699FF;
    font-weight:bold;
}

table{
    margin-right: 30px;
    float:left;
}

thead{
     min-height:86px;   
}

th{
     min-height: 50%;   
}

This jsfiddle is here. If you take a look, you'll see the second table doesn't align horizontally with the first. How can I ensure the tables align, even if now column group name is provided? Note the tables are dynamic, I do not know how many there will be, how many columns etc.

Answer 1

Remove min-height from thead and th and use specific height for th like this: Demo

th {
    height: 50px;
}

Answer 2

so try setting height on th instead of min-height

th{
height: 50px;
}