表格单元格高度不适合内容

Question

我正在使用CSS表格为页面设置基本网格。每行的中心单元格将包含内容，而第一和第三“列”将只是背景颜色。

我遇到的问题与表格单元格高度有关。这是一个显示问题的jsfiddle：http://jsfiddle.net/UQUA9/

    /*** The essential CSS for the layout ***/

    html, body {
        height: 100%;
        margin: 0pt;
    }

    .Frame {
        display: table;
        width: 100%;
    }
    html>/**/body .Frame {
        height: 100%;
    }

    .Row {
        display: table-row;
        height: 1px;
        overflow: hidden; /* commenting this out has no effect. */
    }

    html>body .Row.Expand {
        height: auto; /* commenting this out has no effect. */
    }

    .Row div {
        display: table-cell;
    }

请注意，在HeaderRow中，ContentColumn在它与MenuRow之间的文本末尾下方有一个很大的间隙。我不明白为什么表格单元格会像那样填充它。据我所知，我没有任何填充或边距设置可以解释这个空白区域。我专门使用CSS表，因为它会将单元格高度自动调整为内容，现在它无法正常工作！

这是一个屏幕截图来说明。额外的灰色是问题所在。单元格应该在文本后面的行上结束，但是有一堆空的灰色。粉红色的MenuRow应该显示在HeaderRow中的文本之后。

我知道我错过了一些简单或明显的东西。任何提示都表示赞赏。