如何使TABLE成长为与其容器相同的高度？ （或与IE JavaScript速度作斗争）
[英]How do I have a TABLE grow to be the same height as its container? (or, battling IE JavaScript slowness)
问题描述
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). 
我有一个网页，其中有一个嵌套在TD标签内的表格（请不要为此而烦恼，我有这样做的充分理由）。 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. 页面加载时，我想将嵌套表的高度扩展为包含它的TD单元格的高度。 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). 这可以工作，但是如果页面上有很多表需要调整大小，则IE8可能需要20秒左右的时间（当然，FF需要一两秒钟）。 That's because $(this).height($(this).closest('td').height()); 那是因为$(this).height($(this).closest('td').height()); takes: 需要：
- 1ms in Chrome 在Chrome中为1ms
- 18ms in Firefox 在Firefox中为18ms
- 330ms in IE8 IE8中为330ms
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. 这在Firefox中有效，但在IE中无效。
4 个解决方案
解决方案1
5 已采纳 2010-01-05 17:24:20
I think with a correct HTML Doctype your 2nd example will work in IE as well, without any Javascript. 我认为使用正确的HTML Doctype，您的第二个示例也可以在IE中运行，而无需任何Javascript。
The following works for me in FF, and IE 6, 7, and 8: 以下内容适用于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>
解决方案2
1 2010-01-05 17:24:20
If you give the outer td a pixel height, it should work. 如果您给外部td一个像素高度，它应该可以工作。 I guess currently the td is already at 100% of it's container's height. 我想目前的td已经达到了容器高度的100％。
解决方案3
1 2010-01-05 17:24:46
Why can't you just specify the table to be 100% height in the HTML markup? 为什么不能仅将表格指定为HTML标记中的高度为100％？ This should just work without javascript. 如果没有javascript，这应该可以正常工作。
<td height="100%">
<table height="100%">
...
</table>
</td>
解决方案4
1 2010-01-06 17:09:11
i know everyone loves jquery, but maybe simpler js will help? 我知道每个人都喜欢jquery，但也许更简单的js会有所帮助？
var t = document.getElementById("nestedTable");
t.style.height = t.parentNode.offsetHeight.toString() + "px";
adjust for border/padding/margin as necessary. 根据需要调整边框/填充/边距。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.