我正在尝试设置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>
背景颜色应填充“填充内容”表格单元格的高度:
此外,我之所以这么说是因为我无法设置td标记的样式,因为我的JavaScript中有一种解决方法。
更新:这可能有助于形象化我的具体问题:http://jsfiddle.net/pjd6x/8/有一个叠加层出现在桌面上(有意)和低于div(也是故意的),但我希望div的高度相同(看起来好像它们正在填充tds的内容)。
答案 0 :(得分:1)
如果你的元素可以有一个固定的高度:
td > div {
background-color:#FFFFFF;
color:#FF0000;
padding:5px;
display:table-cell;
height:80px;
vertical-align:middle;
}