如何设置div的样式以填充表格单元格的全部内容？

Question

我正在尝试设置div的样式以填充表格单元格的全部内容。这意味着背景颜色应该填充表格单元格的高度。如何让div填充表格单元格的高度？

<style>
    body { background-color: #ccc; }
    table, tr, td { border: 2px solid #00f; }
    td > div { background-color: #fff; color: #f00; padding: 5px;}
</style>

<table>
    <tr>
        <td>
            <div style="position: relative; z-index: 1000">
                line<br />line<br />line
            </div>
        </td>
        <td>
            <div style="position: relative; z-index: 1000">fill contents</div>
        </td>
    </tr>
</table>

背景颜色应填充“填充内容”表格单元格的高度：

Here is a jsfiddle可以玩。

此外，我之所以这么说是因为我无法设置td标记的样式，因为我的JavaScript中有一种解决方法。

更新：这可能有助于形象化我的具体问题：http://jsfiddle.net/pjd6x/8/有一个叠加层出现在桌面上（有意）和低于div（也是故意的），但我希望div的高度相同（看起来好像它们正在填充tds的内容）。

Answer 1

如果你的元素可以有一个固定的高度：

td > div {
    background-color:#FFFFFF;
    color:#FF0000;
    padding:5px;
    display:table-cell;
    height:80px;
    vertical-align:middle;
}