html - 如何设置 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一起玩。

此外，我问这个问题的原因是因为我的 JavaScript 中有变通方法，所以我不能设置 td 标签的样式。

更新:这可能有助于可视化我的具体问题: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;
}