html - 水平对齐单独的表格

我有很多动态生成的表，它们应该水平对齐。表列被组合在一起，大多数时候都有一个组名。但如果没有，我就不能让桌子水平对齐，桌面的最小高度是不受尊重的。我的代码：

<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。如果你看一看，你会发现第二张桌子和第一张不水平对齐。如何确保表对齐，即使现在提供了列组名称？注意表是动态的，我不知道会有多少，多少列等等。

最佳答案

因此，尝试将height设置为th而不是min-height

th{
height: 50px;
}