当每个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;

演示小提琴

您当前已min-height设置,但如果没有为同一元素设置高度,这将永远不会工作,因为它是一个相对计算的属性.

此外,对于div您拥有的子元素height:100%,再次,没有在父级上设置特定高度td,没有相对引用,因此它实际上变为100%无效.

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