изменение размера DIV на максимальную высоту в таблице

Question

у меня есть такой код:

<td width="10"> 
<div style="border-left: 1px dashed #cccccc;width:10px;height:100%;"></div> 
</td> 

и у меня есть две другие столбцы с элементами, которые могут быть большой высотой я хочу, чтобы установить DIV динамически на максимальную высоту, как в Bigest колонка. высота: 100% не работает. Как это сделать?

Answer 1

Я не мог этого сделать, используя чистый html/css. Но я получил его на работу с несколькими линиями Javascript код:

window.onload = function() { 
    var h = document.getElementById('maintable').offsetHeight; 
    var el = document.getElementById('resizeme'); 
    el.style.height = h+'px'; 
} 

HTML:

<table id="maintable"> 
    <tr> 
     <td></td> 
     <td><div id="resizeme"></div></td> 
     <td>one<br/>two<br/>three<br/>four<br/>five<br/></td> 
    </tr> 
</table> 

CSS:

#resizeme {border: 1px solid blue;} 
table {border-collapse: collapse;} 
table tr td {vertical-align: top; border: 1px solid; padding: 5px;} 

В принципе, все зависит от вашей конечной цели. Возможно, вы могли бы решить вашу проблему, используя только HTML/CSS ... Кроме того, старайтесь не использовать стили CSS в вашем HTML код ...

Answer 2

<td width="10px"> 
<div style="border-left: 1px dashed #cccccc;width:inherit;display:table"></div> 
</td> 

надеюсь, что это помогает