当每个td包含具有动态内容的div时，使所有tds具有相同的高度？

Question

我试图在相同高度的桌子上制作所有tds。我有四个细胞，每个细胞的宽度为25％。每个td将具有基于div的内容，该内容将是动态的并且长度不同。我无法改变它的结构。

任何帮助将不胜感激。感谢.. !!

小提琴链接：http://jsfiddle.net/binita07/kVm7P/1/

HTML

<div class="test">
<table>
    <td><div>Dummy Content 1</div></td>
    <td><div>Dummy Content 2</div></td>
    <td><div>Dummy Content 1 and will be more</div></td>
    <td><div>Dummy Content 4</div></td>
</table>
</div

CSS

.test{
width:400px;
background:#f00;
}
table{
border-collapse:collapse;
padding:0;
}
table td{
    width:25%;
    display:table-cell;
    vertical-align:top;
    min-height:30px;
}
table td div{
    background:green;
    height:100%;
}

Answer 1

只需将min-height:30px;更改为height:30px;，确实可以将其设置为height:0px;

Demo Fiddle

您目前设置了min-height，但如果没有为同一元素设置高度，这将永远不会有效，因为它是一个相对计算的属性。

此外，对于您拥有div的子height:100%元素，但是，如果没有在父td上设置特定高度，则没有相对参考，因此它实际上变为百分之百没有。

将height:0;添加到父td可为单元格提供已定义的高度值，因此可以相对于某事计算div高度，因为布局此高度为被迫扩展以适应儿童内容，而不是简单地“坚持零”。