当每个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设置特定高度，没有相对参考，所以它实际上有100％没有任何东西。

将height:0;添加到父级td可为单元格提供已定义的高度值，因此可以相对于某些内容计算div高度，由于布局，此高度被强制扩展以适合子内容，而不是简单地“粘在零”。