unwanted space before and after nested html table using Internet Explorer 8
I have an html table nested in an html table cell. I want the nested table to use the full size of the cell it is nested in. When I use firefox or google chrome I get the result I want but when I use Internet Explorer 8 (even if I use td style="height="100%") the height of the nested cell depends on it's content. As a result I get whitespace before and after my nested table. Here is a simple html that will reproduce the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"开发者_如何学C content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table, td, th {border:#000 medium solid}
</style>
<body>
<table>
<tr>
<th style="margin:0;padding:0;height:100;">
<table><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Here is your problem, you have specified <th style="margin:0;padding:0;height:100;"> in inline CSS style for you th inside your main table.
This should solve you problem, try using height:100%; instead.
EDIT:
To get rid of you extra space that requires in IE8 to scroll down you page, you can remove you border and add cellpadding="0" cellspacing="0" to you main table.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th style="margin:0px;padding:0px;height:100%;">
<table><tr><th>nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Using attached code worked for me for both IE and FF but had to remove the borders as they are handled differently by IE and FF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr>
<th style="margin:0;padding:0;height:100%;">
<table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
In your <th>, you have "height:100;" instead of "height:100%;" - missing the "%"
<th style="margin:0;padding:0;height:100%;">
instead of
<th style="margin:0;padding:0;height:100;">
try just adding th{height:100%} to your css style
加载中,请稍侯......
精彩评论