CSS表格单元格大小问题

Question

我创建了一个包含两行的CSS表格布局 - 第一行包含一个包含图像的单元格，第二个单元格包含一个标题。在此之下，内容将会出现，但这不是问题所在。

每当我尝试这个时，我会为顶部的表格行获得大量超大的表格单元格，我似乎无法调整大小。任何帮助将不胜感激。

我对表格单元格进行了颜色编码，橙色块是图像。下面的空白区域似乎已经创建，因为蓝色的表格单元格太大了。

<div class="table">
        <div class="tr-header">
            <div class="image-cell">
                <img src="orange.png"/>
            </div>
            <div class="title">
            <h1>title</h1>
            </div>
        </div>
        <div></div>
        <div class="tr-content">
            <div class="content">
                <!-- Lorem Ipsum -->            
            </div>
        </div>
</div>

CSS：

    *
    {
    margin:0px;
    padding:0px;
    }
    #table
    {
    display: table;
    }
    .tr-header
    {
    width:100%;
    display: table-row;
    height:185px;
    }
    img
    {
    width: 285px;
    height: 185px;
    }
    .image-cell
    {
    width:285px;
    height:185px;
    display: table-cell;
    }
    .title
    {
    display: table-cell;
    background-color:blue;
    width:100%;
    height:185px;
    }
    .tr-content
    {
    display: table-row;
    }
    .content
    {
    background-color:yellow;
    display: table-cell;
    width:100%;
    }

道歉，如果颜色编码没有帮助，或者我的代码不易阅读，或者我只是犯了一个愚蠢的错误，但我已经搜索了W3的网站以及之前的stackoverflow问题。

提前致谢。

编辑：

将vertical-align：top添加到.title已经大大减少了问题，但我仍然留下了这个：

Answer 1

您需要始终担心与表格的垂直对齐 - 甚至是css样式的表格。

只需向标题类添加vertical-align属性：

.title {
display: table-cell;
vertical-align: top;
background-color:blue;
width:100%;
height:185px;
}