css - tbody 的垂直对齐

Question

我有一张由 thead 和 tbody 分隔的表格。我在 tbody 中的文本是垂直居中的。我想让它显示在 tbody 的顶部。

<thead>
    <tr>
        <td>.... </td>
    </tr>
</thead>
<tbody> 
    <tr>
        <td colspan="5">
            <h1>Hi</h1>
            <p> Hello!
            </p>
        </td>
    </tr>
</tbody>

我试过做类似的事情:

tbody { vertical-align:top;}

但这行不通

Answer 1

问题不在于 valign，因为它工作正常，问题是元素 h1 默认有边距，您应该将其设置为 0:

h1 {
      margin: 0;
}

<table border="1">
<thead>
    <tr>
        <td>.... </td>
        <td>.... </td>
    </tr>
</thead>
<tbody valign="top"> 
    <tr>
        <td>
            <h1>Hi</h1>
            <p> Hello!</p>
        </td>
        <td>
            A
        </td>
    </tr>
</tbody>  
</table>