Question

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

如何让div＃block超出2父divs＆amp;容器

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: