Сделать все tds равной высоты, когда каждый td содержит div с динамическим контентом?

Я пытаюсь сделать все 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%;
}

Ответы

Ответ 1

Просто измените min-height:30px; на height:30px;, действительно, вы можете установить его на height:0px;

Демо-скрипт

В настоящее время у вас установлен min-height, но это никогда не будет работать без установки высоты для того же элемента, что и относительно вычисленное свойство.

Кроме того, для дочерних элементов div у вас есть height:100%, но, опять же, без определенной высоты, заданной в родительском td, нет относительной ссылки, поэтому она фактически становится 100% ничего.

Добавление height:0; в родительский td предоставляет определенное значение высоты для ячейки, поэтому высоты div могут быть затем вычислены относительно чего-либо, из-за макета этой высоты принудительно расширяется, чтобы соответствовать дочернему контенту, в отличие от просто "придерживаться нуля".