为什么填充和边距优先于某些东西的高度/溢出？

Question

我正在尝试创建一个表，以便有2行。顶行包含2列，底行包含一列。我希望顶行和底行具有固定的高度，并且要隐藏溢出。我不在乎文字是否太大，只是高度保持不变。

为什么当我在标题标签（h1，h2等）中添加文本时，该行会扩展以允许文本适合？我希望隐藏额外的东西。

我做错了什么？这是一些代码：

<style>
.top-right-cell,
.my-top-row {
    height: 50px;
    overflow: hidden;
}

.my-bottom-row {
    height: 50px;
}
</style>
<table>
    <tr class="my-top-row">
        <td class="top-left-cell">Something</td>
        <td class="top-right-cell"><h1>Something else.</h1></td>
    </tr>
    <tr class="my-bottom-row">
        <td class="bottom-cell" colspan="2">Something longer that takes 2 columns.</td>
    </tr>
</table>

JS小提琴：http://jsfiddle.net/PpT2C/

布局不是重要的部分。我只是想知道为什么填充和边距似乎优先于高度和溢出属性。