how to get the size of td

Question

i have a table which in which i have td .when i click in text field which has onkeypress event select values from database a table is shown from whic i select value.this select table is in div which position is fixed.but it will also chang the height

<td class="value">vehicle </td><td> 
 <input type="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4">
  <div id="div_vhc"  class="search_form">
</div>


 <input type="text" id="vid" style="display:none;">

JavaScript:

function vhc_record() {
    var data = 'vhc=' + document.getElementById('txt_sh_vid').value;
    loadXMLDoc('ship/vehicle_ship/', 'div_vhc', data);
    document.getElementById('div_vhc').style.visibility = "visible";
}

it is css of the above table

    td.value
    {
    background-color:#00628B;
    color:#E6E6DC;
    height:50;

    }

    div.search_form
    {
    position:fixed;
     background-color:white;

}

when i press key in textfield it will also change the height of class="value" like div id="div_vhc" while its height is 50

Answer 1

Here is the JSFiddle Demo. Let me know if this is what you are looking for:

I am guessing what you are looking for is to grab td.value width and height. You can use offsetHeight or offsetWidth

I am not very sure what you are trying to do, but to get the height of td.value you can do the following assume based on the structure of html. of course if you wish to traverse through all td element and find the element w/ the class name value then you'll have to use regex to match the element with value as part of its class:

Your vhc_record function midified:

var myvalue = document.getElementsByTagName('td')[0];  //grabs the td.value element based on your html markup

document.getElementById('div_vhc').style.height = myvalue.offsetHeight+'px';  //sets div_vhc height to that of td.value
document.getElementById('div_vhc').style.width= myvalue.offsetWidth+'px';//sets div_vhc width to that of td.value

The changes i made to the html and css and i added some visiblity properties to make the example looks apparent:

<table><tr><td class="value">vehicle </td></tr></table>
<input type="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4">
<div id="div_vhc"  class="search_form">
</div>


<input type="text" id="vid" style="display:none;">

td.value
{
    background-color:#00628B;
    color:#E6E6DC;
    height: 50px;   
    width: 50px;
}

#div_vhc
{
    position:fixed;
    background-color:white;
    display: none;
    border: 1px solid black;
}

Answer 2

Step 1: Add table-layout:fixed to the TABLE element style.

Step 2: Add overflow: hidden to the TD element style.

Here is an example where the inner DIV is taller than the containing TD, but the TD will stay at 50 and hide the rest:

<table style="table-layout:fixed">
    <tr>
        <td style="overflow:hidden;height:50px;border:solid 1px #000">
            <div style="height:100px;background:#f00">Hello<br>I am a very<br>very<br>very<br>very<br>long<br>multiline<br>text...</div>
        </td>
    </tr>
</table>

if you want to have it scroll instead, use overflow:scroll in the td element style.