HTML Table Heights when Nested and set to 100%, the second table overlaps the first
Copy the example below and save it as an .html file and run it in your browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<table style="width:100%;height:500px" border="5" >
<tr>
<td>
<br /><br /><br /><br /><br /><br />
<table border=1 style="width:100%;height:100%">
<tr>
<td>
<br />test<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
You will see that the second table overlaps the first table by the amount of line breaks added. Without removing the "height" element on the first table, how can I get the second table to expand to the remaining full height and not overlap the first ta开发者_如何学Cble.
This is a smaller sample of a larger more complicated HTML scenario
This code works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<table style="width:100%;height:500px" border="5" >
<tr><td height="75px"></td></tr>
<tr>
<td>
<table border=1 style="width:100%;height:100%;">
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>
Just change the td height to whatever you need. The reason it overlapped was because the inner table was set to 100% height, and the the <br /> didn't affect the height of the outer table and make it expand because it was set to a fixed height.
加载中,请稍侯......
精彩评论