如何让TABLE增长到与容器相同的高度？(或者,与IE JavaScript的竞争缓慢)

Question

如何让TABLE增长到与容器相同的高度？(或者,与IE JavaScript的竞争缓慢)

我有一个网页,我有一个嵌套在TD标签内的表(不要因为这个而点燃我,我有充分的理由这样做).当页面加载时,我想将嵌套表的高度扩展为包含它的TD单元格的高度.目前我使用这样的代码:

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

Run Code Online (Sandbox Code Playgroud)

这样可行,但是如果页面上有很多要调整大小的表,IE8可能需要大约20秒才能完成(当然,FF需要一两秒钟).那是因为$(this).height($(this).closest('td').height());:

Chrome中1ms
在Firefox中18ms
在IE8中330毫秒

有没有其他方法,我可以让嵌套表始终采取其容器的高度？

我尝试过的事情:

<!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>

Run Code Online (Sandbox Code Playgroud)

这适用于Firefox但不适用于IE.

Answer 1

Pek*_*ica 5

我认为使用正确的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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，1 月前
查看次数：	1325 次
最近记录：	16 年，1 月前