How to get td size

Question

I have a table in which I have td. When I click in the text box that has onkeypress the values ​​of the event selection from the database show the table from which I select the value. This selection table is in a div whose position is fixed. but she will also change 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"; } 

this is css of the specified table

  td.value { background-color:#00628B; color:#E6E6DC; height:50; } div.search_form { position:fixed; background-color:white; } 

when I press a key in a text field, it will also change the height of class = "value as div id =" div_vhc " , and its height is 50

Answer 1

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

I assume that you are looking to capture the width and height of td.value . You can use offsetHeight or offsetWidth

I'm not very sure what you are trying to do, but to get the height of td.value you can do the following based on the html structure. of course, if you want to go through the whole td element and find the w / element of the class name, you will have to use a regular expression to match the element with the value as part of its class:

Your vhc_record function is blurry:

 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 html and css, and I added some visiblity properties to make the example obvious:

 <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 style of the TABLE element.

Step 2: add overflow: hidden in the TD element style.

Here is an example where the internal DIV is higher than containing the TD, but the TD will remain 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 it to scroll instead, use overflow: scroll in the style of the td element.