...

View Full Version : determining the precise dimensions of a table cell



davidklonski
06-19-2004, 11:30 AM
Hello

Assuming that I have the following table definition:


<table border="0" cellpading="0" cellspacing="0">
<tr>
<td><!-- content --></td>
<td><!-- content --></td>
<td><!-- content --></td>
</tr>
<tr>
<td><!-- content --></td>
<td id="cell" width="100%" height="100%"><!-- content --></td>
<td><!-- content --></td>
</tr>
<tr>
<td><!-- content --></td>
<td><!-- content --></td>
<td><!-- content --></td>
</tr>
</table>


Note that I have set the width and height of the middle cell to 100%.
Is there a way of knowing on the client-side (probably using Javascript) what is the actual width and height that cell is occupying in pixels?
Obviously, the width and height will be determined by the content of all the cells of the table. However, once the table is drawn, the cell will have a final width and height. I am looking for a way to get those dimensions.

I tried using: cell.style.pixelWidth & cell.style.pixelHeight but I am not getting anyting...

Thanks for the help in advance.

Willy Duitt
06-19-2004, 02:40 PM
You could try adding a blank/transparent gif to a cell and easily grab the width of the image and add any border to that...

Removed example code....


Edit: Cross-posted :(
http&#58;//www.codingforums.com/showthread.php?p=211571#post211571

Mr J
06-19-2004, 03:35 PM
document.getElementById("cell").offsetWidth

But, a % width of a cell is governed by the total width of the table so you cannot have the middle cell at 100%

I think.

Experiment with the following


<table border="0" cellpading="0" cellspacing="0" width="500">
<tr>
<td><!-- content -->1</td>
<td><!-- content -->2</td>
<td><!-- content -->3</td>
</tr>
<tr>
<td id="temp1" width="30%"><!-- content -->Dummy Text</td>
<td id="cell"><!-- content -->Dummy Text</td>
<td id="temp2" width="30%"><!-- content -->Dummy Text</td>
</tr>
<tr>
<td><!-- content -->7</td>
<td><!-- content -->8</td>
<td><!-- content -->9</td>
</tr>
</table>

<script>
document.getElementById("cell").innerHTML="The left cells width = "+document.getElementById("temp1").offsetWidth+"px"

document.getElementById("cell").innerHTML+="<br>This cells width = "+document.getElementById("cell").offsetWidth+"px"

document.getElementById("cell").innerHTML+="<br>The right cells width = "+document.getElementById("temp2").offsetWidth+"px"
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum