HTML Table Heights when Nested and set to 100%, the second table overlaps the first_问答_开发者

HTML Table Heights when Nested and set to 100%, the second table overlaps the first

开发者 https://www.devze.com 2023-03-22 07:08 出处：网络

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\">

相关专题：css

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.