Make all tds of equal height, when each td contains a div with dynamic content?

Question

I'm trying to make all tds in a table of equal height. I have four cells, each with a width of 25%. Each td will have a div based content, which will be dynamic and varying in length. I cannot change the structure of it.

Any help will be greatly appreciated. Thanks..!!

Fiddle link: 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

Simply change min-height:30px; to height:30px;, indeed- you can actually set it to height:0px;

Demo Fiddle

You currently have min-height set, but this will never work without height being set for the same element as it is a relatively calculated property.

Also, for the child div elements you have height:100%, however, again, without a specific height being set on the parent td, there is no relative reference so it effectively becomes 100% of nothing.

Adding height:0; to the parent td provides a defined height value for the cell so the div heights can then be calculated relative to something, due to layouting this height is forced to expand to fit the child content as opposed to simply 'sticking at zero'.