How can I make an element take up the width of the window inside of the width of its parent?

Question

I need to edit this #block only
Finally I need to show the table in full screen with width 100%

How can I make the div#block to get outside the 2 parent divs row & container?

<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

You can increase the width to 140% and use margin-left: -20% to align it.

 .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

You can use 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>

How can I make an element take up the width of the window inside of the width of its parent?

Question

2 answers

solution1
2 2014-12-01 11:19:56

solution2
2 ACCPTED 2014-12-01 11:22:36

How can I make an element take up the width of the window inside of the width of its parent?

Question

2 answers

solution1 2 2014-12-01 11:19:56

solution2 2 ACCPTED 2014-12-01 11:22:36

solution1
2 2014-12-01 11:19:56

solution2
2 ACCPTED 2014-12-01 11:22:36