Question

我想要一个填满整个窗口的表，每行填充表格的一半高度（以及窗口），并在调整窗口大小时保持此布局。我可以在内容没有溢出时执行此操作，但是当第1行中的内容需要高于计算高度百分比的高度时，该行不再保持百分比，而是保持所需高度并且将第2行推出窗口。我试过“溢出：隐藏;”对于行，但这不是它的工作方式。那怎么办呢？

<!doctype html>
<html>
    <head>
        <style>
            html,body{height:100%;}
            table{height:100%;}
            table>tbody>tr{height:50%;overflow:hidden;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br     />abc<br /></td>
            </tr>
            <tr>
                <td>def</td>
            </tr>
        </table>
    </body>
</html>

Answer 1

更新您的CSS，如下所示。

 html,body{height:100%; padding:0; margin:0;}
 table{height:100%;}
 table td{height:100%; overflow:auto; display:block; border:1px solid #ff00ff;}

DEMO

“溢出：隐藏;”对于百分比大小的表格单元

1 个答案: