时间戳

首页 > 解决方案 > 为没有固定大小的表格创建一个可滚动容器，该容器还可以防止父元素（包括浏览器窗口）上的滚动条

html - 为没有固定大小的表格创建一个可滚动容器，该容器还可以防止父元素（包括浏览器窗口）上的滚动条

问题描述

期望的输出：

实际输出：

我想避免的解决方案：

编辑：此示例 html 中指定的表格高度和宽度仅用于说明问题。在我的应用程序中，我无法控制表格的大小，而且表格非常大。



    <html>
    <head>
    <style>

    body, html {
        height:100vh;
        width:100vw;
        max-height:100vh;
        max-width:100vw;
        display:flex;
        flex:1;
        margin:0;
        padding:0;
    }


    footer {
        display:flex;
        height: 10vh;
        min-height: 10vh;
        background-color:#666666;
    }

    .page 
    {
        display:flex;
        flex:1 1 auto;
        flex-direction:row;
    }

    .side-nav {
      display: flex;
      flex:0 1 auto;
      flex-flow: column;
      width:20vw;
      min-width:20vw;
      height:100vh;
      min-height:100vh;
      background-color:#99ccff;
    }

    .content {
      display: flex;
      flex-direction:column;
      flex:1 1 auto;
      background-color:#cccccc;
    }

    .col-layout {
        display:flex;
        flex:1 1 auto;
        flex-direction:column;
    }

    .table-container {
        display:flex;
        flex-direction:column;
        overflow-x:scroll;
        overflow-y:scroll;
        margin:3%;
        background-color:red;
        width:90%;
        max-width:90%;
        height:90%;
        max-height:90%;
    }



    table {
        margin:3%;
        width:1500px;
        height:2000px;
        background-color:#3399ff;
    }

    </style>
    </head>
    <body>
    <div class="page">
      <div class="side-nav">
        <label>Side Nav</label>
      </div>

      <div class="col-layout">
          <div class="content">
            <label>Content</label>
            <label>The red div should have vertical and horizontal scroll bars - no vertical or horizontal scroll bars should appear on the browser window.</label>
            <div class="table-container">
                <table>
                    <tr><td>key</td><td>value</td></tr>
                </table>
            </div>
          </div>
            
          <footer>
            <label>Footer</label>
          </footer>
      </div>
    </div>

    </body>
    </html>

标签： htmlcssflexbox

解决方案

防止表格的大小影响其弹性项目祖先的大小，方法是将其min-width和设置min-height为auto.

你现在在浏览器窗口上看到滚动条的原因是你的表的祖先——<code>.table-container——是.col-layout弹性项目，弹性项目默认从它们的内容中获得它们的最小尺寸。因此，如果内容是一个巨大的表格（它很大是因为它有很多内容，或者因为我们明确设置了width和/或height），那么元素层次结构中的弹性项目将尝试“保护”这个大小。

我们可以通过查看 Firefox DevTools 布局检查器来确认这一点： 在此处输入图像描述

可以通过设置min-width或更改此行为min-height。初始值为auto，这就是在 Flexbox 中导致这种内容派生大小的原因。因此，例如，如果您有一个带有 的 flex 容器flex-direction: row，您将希望从 更改min-width为auto其他内容。

在我们的例子中，我们想要完全忽略table. 因此，我们将为所有可能影响其大小的元素设置min-width和min-heightto 。0table

这是一个工作示例：

body {
  margin: 0;
  height: 100vh;
  display: flex;
}

nav {
  padding: 32px;
  background-color: bisque;
}

section {
  flex: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: auto;
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 16px;
  font-weight: bold;
}

footer {
  padding: 24px;
  background-color: burlywood;
}

.table-container {
  flex: auto;
  min-height: 0;
  background-color: tomato;
  padding: 16px;
  overflow: auto;
}

table {
  width: 1500px;
  height: 2000px;
  background-color: steelblue;
  border: 10px solid white;
}
<body>
  <nav>Side nav</nav>
  <section>
    <main>
      <h1>Content with the table container</h1>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th colspan="2">The table header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>The table body</td>
              <td>with two columns</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <footer>Footer</footer>
  </section>
</body>

推荐阅读