CODEWITHSUNDEEP
htmlcss
Vytas P.
Vytas P.

Reputation: 983

Resize DIV to maximum height in table

i have such code:

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

and i have other two columns with elements, which may be big in height i want to set div dinamically to maximum height as in bigest column. height:100% does not work. How to do that?

Upvotes: 0

Views: 80

Answers (2)

Footniko
Footniko

Reputation: 2752

I could not do it using pure html/css. But I've got it to work with a few lines of javascript code:

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;}

Basically, all depends of what is your final goal. Probably you could solve your problem using only html/css... Also, try not to use css styles in your html code...

Upvotes: 1

Sameer Shaikh
Sameer Shaikh

Reputation: 7814

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

hope this helps

Upvotes: 0

Related Questions