Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    determining the precise dimensions of a table cell

    Hello

    Assuming that I have the following table definition:
    Code:
    <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.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Willy Duitt; 06-19-2004 at 03:49 PM.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>
    Last edited by Mr J; 06-19-2004 at 04:48 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •