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

我正在尝试设置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>

正文{背景色：#ccc；}
表，tr，td{border:2px solid#00f；}
td>div{背景色：#fff；颜色：#f00；填充：5px；}
行
行
行
填充内容

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

玩

另外，我问这个问题的原因是，由于JavaScript中的一个变通方法，我无法为td标记设置样式

---

更新：这可能有助于将我的具体问题可视化：有一个覆盖显示在表的顶部（有意）和div的下方（也有意），但我希望div的高度相同（看起来好像它们填充了tds的内容）。

如果元素可以具有固定高度：

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

---

如果图元可以具有固定高度：

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

---

我认为这实际上是不可能的，因为一个表单元格不能有

位置：relative

，因此您不能绝对地在其中定位div，并且

宽度/高度：100%

不能跨浏览器正常工作。想知道是否有什么东西出现了为什么你不把这个css添加到tabel单元格中？我想Pekka是对的。你需要文本在顶部吗？尝试将

vertical align:top

应用于您的

td

。我认为这实际上是不可能的，因为表格单元格不能有

位置：relative

，因此无法绝对定位div，并且

宽度/高度：100%

无法跨浏览器正常工作。想知道是否有什么东西出现了为什么你不把这个css添加到tabel单元格中？我想Pekka是对的。你需要文本在顶部吗？尝试将

vertical align:top

应用于您的

td

。这可能是我必须做的事情（指定固定高度）…但是，我不能使用

display:table cell

，因为这是我要避免的部分问题，这意味着我不能使用<代码>垂直对齐：中间< /代码>，但我仍然想在中间对齐文本……嗯……不确定我应该怎么做，你可以解释你试图避免的问题。也许这个特定的问题只是更大问题的症状…顺便说一句。。。桌子的背景色怎么样？！我无法想象它不会对我的父母起作用，除了孩子是主播。不能有一半按钮不可单击：（这可能是我必须做的（指定固定高度）但是，我不能使用<代码>显示：表单元格< /代码>，因为这是我要避免的问题的一部分，这意味着我不能使用<代码>垂直对齐：中间< /Cord>。但是我仍然希望在中间对齐文本……嗯……不确定我应该怎么做，你可以尝试解释你试图避免什么问题。也许这个特定的问题I这只是更大的症状…顺便说一句…桌子的背景色怎么办？！无法想象它不起作用o_OBackground颜色对我来说很好，除了孩子们是锚。不能有一半的按钮不可点击(