水平对齐单独的表格

Question

我有许多应该水平对齐的动态生成的表格。表格列被组合在一起并且大部分时间都具有组名。但是，如果他们不这样做，我不能让桌子水平对齐，桌子的最低高度不受尊重。我的代码：

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

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

这是的jsfiddle here。如果你看一下，你会看到第二张桌子不与第一张桌子水平对齐。如何确保表格对齐，即使现在提供了列组名称？注意，表是动态的，我不知道有多少会有，多少列等

Answer 1

所以试穿th设置height，而不是min-height

th{ 
height: 50px; 
} 

Answer 2

从thead and th删除最小高度和使用特定的height为th这样的：Demo

th { 
    height: 50px; 
}