Home/ Questions/Q 522939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:24:21+00:00

I have a web page where I have a table nested inside of a

  • 0

I have a web page where I have a table nested inside of a TD tag (don’t flame me for this, I have a good reason for doing it this way). When the page loads, I want to expand the height of the nested table to be the height of the TD cell that contains it. Currently I do it with code like this:

$(document).ready(function()
{
    $('.TakeOffItemGroupTable').each(function()
    {
        $(this).height($(this).closest('td').height()); 
    });
}

This works, but if there are a lot of tables to resize on the page, it can take ~20 seconds for IE8 to do it (FF takes a second or two, of course). That’s because $(this).height($(this).closest('td').height()); takes:

  • 1ms in Chrome
  • 18ms in Firefox
  • 330ms in IE8

Is there some other way that I can have the nested table always take on the height of its container?

Things I have tried:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
  <table border="1" >
    <tr>
       <td width="100px">JKLSD FASJDFKLSA DFKLADFJL KASDJFKLSAD JFSAKLDF</td>
       <td style="height: 100%;">
           <table style="height:100%;" border="1">
            <tr>
              <td>
                    I should be 100% tall!
              </td>
            </tr>
           </table>
       </td>
    </tr>
  </table>
</body>
</html>

This works in Firefox but not in IE.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think with a correct HTML Doctype your 2nd example will work in IE as well, without any Javascript.

    The following works for me in FF, and IE 6, 7, and 8:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
  <table style="height: 100%" border="1" >
    <tr><td>
       <table style="height:100%" border="1">
        <tr>
          <td>
                I am 100% tall!
          </td>
        </tr>
       </table>
    </td></tr>
  </table>
</body>
</html>
    • 0