Я пытаюсь сделать все tds в таблице одинаковой высоты. У меня четыре клетки, каждая с шириной 25%. Каждый тд будет иметь контент на основе 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%;
}