如何实现嵌套表格的100%高度
<div style=" width:800px; height:600px;">
<table id="table1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="height:120px;"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table id="table2" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td style="height:20px;"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
table2的高度100%无效
请问如何才能让其高度100%？ 表格嵌套? 100%高度
[解决办法]
你看看这个是不是你想要的结果
<div style=" width:500px; height:400px;">
<table id="table1" >
<tr>
<td style="height:120px;"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="detail">
<table id="table2" >
<tr >
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr >
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td style="height:20px;"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
#table1 {
width:100%;
height:100%;
border:3px solid gray;
border-collapse:collapse;
}
#table1 td {
border: 1px solid gray;
padding:0px;
}
#table2 {
width:100%;
height:100%;
margin:0px;
border-collapse:collapse;
}
#table1 .detail {
border-style: hidden;
}
#table2 td {
border: 1px outset gray;
}
------解决方案--------------------
用js/jquery配合吧
<!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>
<title> new document </title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
var $table2 = $("#table2");
$table2.height($table2.parent().height());
})
//-->
</script>
</head>
<body>
<div style=" width:800px; height:600px;">
<table id="table1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="height:120px;"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<table id="table2" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td style="height:20px;"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>