如何使元素在其父元素的宽度内占据窗口的宽度？

Question

我只需要编辑此#block
最后，我需要全屏显示表格，宽度为100％

如何使div＃block超出2个父div行和容器？

<html>
<head><style>
.container{
    max-width: 80%;
}

.row{
    max-width: 90%;
}

#block{
    width: 100%; //I need to edit this block only - To show the table in full screen with width 100%
}
</style></head>
<body>

<center>
<div class="container">
    <div class="row">
        <div id="block">
            <table border="1" width="100%">
            <tr><td>Hello</td></tr>
            </table>
        </div>
    </div>
</div>
</center>

</body>
</html>

Answer 1

您可以将width增加到140%并使用margin-left: -20%对齐。

 .container { max-width: 80%; } .row { max-width: 90%; } #block { width: 140%; margin-left: -20%; } 

 <center> <div class="container"> <div class="row"> <div id="block"> <table border="1" width="100%"> <tr> <td>Hello</td> </tr> </table> </div> </div> </div> </center> 

Answer 2

您可以使用position: absolute

 .container { max-width: 80%; } .row { max-width: 90%; } #block { width: 100%; position: absolute; left: 0; } 

 <center> <div class="container"> <div class="row"> <div id="block"> <table border="1" width="100%"> <tr> <td>Hello</td> </tr> </table> </div> </div> </div> </center>