Question

复制下面的示例并将其另存为.html文件并在浏览器中运行

<!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>

您将看到第二个表与第一个表重叠了添加的换行符数量。如果不删除第一个表中的“height”元素，如何让第二个表扩展到剩余的完整高度而不与第一个表重叠。

这是较大的更复杂的HTML场景的较小样本

Answer 1

此代码有效：

<!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>

只需将td高度更改为您需要的任何高度。它重叠的原因是因为内表设置为100％高度，<br />不影响外表的高度并使其扩展，因为它被设置为固定高度。

嵌套时的HTML表高度并设置为100％，第二个表与第一个表重叠

1 个答案: