Width of rendered table cell

[kudryk]

Is it possible through javascript to determine the width of a rendered table cell? I have two adjacent tables, one on top of the other. Both tables have the same number of columns, because the content of each column in the top table is related to the its corresponding column in the bottom table (I needed to use two tables because of the UI I had to design). Depending on the size of the numbers in the bottom table's columns, each individual column will vary in width. But to ensure the corresponding top table's column match, I need to resize the top table's columns after the bottom table has been rendered. I've attached a picture to illustrate.

If in javascript I obtain a column's TD element, the width, innerWidth or offsetWidth properties are either null or a value that doesn't correspond to the true width of the column.

Does anyone know how to get the true rendered width value of a table cell?

Thanks in advance

[iam_clint]

<script>
function sizecolumns() {
if (document.getElementById("5").style.width < document.getElementById("1").offsetWidth) {
    document.getElementById("5").style.width = document.getElementById("1").offsetWidth - 2;
} else {
    document.getElementById("1").offsetWidth = document.getElementById("5").style.width - 2;
}
 
if (document.getElementById("2").style.width < document.getElementById("6").offsetWidth) {
    document.getElementById("2").style.width = document.getElementById("6").offsetWidth - 2;
} else {
    document.getElementById("6").offsetWidth = document.getElementById("2").style.width - 2;
}
 
if (document.getElementById("3").style.width < document.getElementById("7").offsetWidth) {
    document.getElementById("3").style.width = document.getElementById("7").offsetWidth - 2;
} else {
    document.getElementById("7").offsetWidth = document.getElementById("3").style.width - 2;
}
 
if (document.getElementById("8").style.width < document.getElementById("4").offsetWidth) {
    document.getElementById("8").style.width = document.getElementById("4").offsetWidth - 2;
} else {
    document.getElementById("4").style.width = document.getElementById("8").offsetWidth - 2;
}
}
</script>
<table border="1">
<tr>
<td id="1">This is a test<td id="2">to<td id="3">size<td id="4">columns
</table>
<table border="1">
<tr>
<td id="5">based on<td id="6">how big its corresponding<td id="7">cell<td id="8">is
</table>
<input type="button" value="size columns" onclick="sizecolumns();">
 

this is pretty close but not 100% accurate just trying to give you an example

[BontaKun]

Building on the previous post, this here works quite well...

 
 <table border >
          <tr><td id=hd1>Column 1</td><td id=hd2>Column 2</td><td id=hd5>Column 5</td></tr>
    </table>
    <table border>
       <tr><td id=col1>&nbsp;</td><td id=col2>&nbsp;</td><td id=col5>&nbsp;</td></tr>
    <tr><td>Afr.</td><td>Swallow w/Coconut</td><td>45/min</td></tr>
    <tr><td>Eur.</td><td>Swallow w/Coconut</td><td>47/min</td></tr>
    </table>
    <script language="javascript" type="text/javascript">
      var w1,w2,w5;
      var hd1 = document.getElementById("hd1");
      var hd2 = document.getElementById("hd2");
      var hd5 = document.getElementById("hd5");
      var col1 = document.getElementById("col1");
      var col2 = document.getElementById("col2");
      var col5 = document.getElementById("col5");
      w1 = hd1.offsetWidth > col1.offsetWidth ? hd1.offsetWidth : col1.offsetWidth;
      w2 = hd2.offsetWidth > col2.offsetWidth ? hd2.offsetWidth : col2.offsetWidth;
      w5 = hd5.offsetWidth > col5.offsetWidth ? hd5.offsetWidth : col5.offsetWidth;
 
      hd1.width = w1; col1.width = w1;
      hd2.width = w2; col2.width = w2;
      hd5.width = w5; col5.width = w5;      
    </script>