html - 水平对齐单独的表格

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