我有一个网页,我有一个表嵌套在一个TD标记(不要为这个火上浇油,我有一个很好的理由这样做)。当页面加载时,我想将嵌套表的高度扩展为包含它的TD单元格的高度。目前我使用的代码如下:

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

这是可行的,但是如果页面上有很多表需要调整大小,IE8可能需要大约20秒才能完成(当然,FF需要一两秒钟)。因为$(this).height($(this).closest('td').height());需要:
1毫秒铬合金
Firefox中的18ms
IE8中330ms
是否有其他方法可以让嵌套表始终占据其容器的高度?
我尝试过的事情:
<!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>

这在Firefox中有效,但在IE中无效。

最佳答案

我认为使用correct HTML Doctype的第二个示例也可以在IE中使用,而不需要任何Javascript。
以下内容适用于FF和IE 6、7和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>

关于html - 如何使TABLE成长为与其容器相同的高度? (或与IE JavaScript的速度作斗争),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2007794/

10-13 00:12