Регулировка высоты в соответствии с TD высота

Question

У меня есть 4 <td> s в таблице, и каждый <td> имеет границу 1 пиксель. У всех divs есть текст «My Division».

Теперь, когда я добавить еще какой-нибудь текст в одном из <td> с из них то высоты <td> увеличивается и высота <div> в этом <td> также увеличивается, но другие 3 <div> в другой 3 <td> нет. Как отрегулировать их высоту также в соответствии с увеличенным <td>.

<table> 
<tr> 
    <td height="50"><div style="border:1px solid;">My Division</div></td> 
    <td height="50"><div style="border:1px solid;">My Division</div></td> 
    <td height="50"><div style="border:1px solid;">My Division</div></td> 
    <td height="50"><div style="border:1px solid;">My Division</div></td> 
<tr> 
</table> 

Answer 1

С чистым CSS это будет возможно, только если ваши tds имеют заданную высоту. Затем вы можете сделать divs высотой 100%. Но это не то, что вы ищете.

Для решения вашей проблемы вам необходимо использовать javascript.

Answer 2

Это то, что вам нужно:

#myTable td { 
    vertical-align:top; 
} 

#myTable td div { 
    height:100%; 
} 
​ 

jsFiddle test