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

因此，请尝试在height上设置th，而不是min-height

th{
height: 50px;
}

Answer 2

从thead and th移除最小高度，并对height使用特定的th，如下所示： Demo

th {
    height: 50px;
}

水平对齐单独的表

2 个答案: