问题:

我有一个<table>元素,我想动态填充100%的容器高度,而不会超过该高度。

背景:

<table>超过容器高度时,我希望能够滚动浏览表行。我不希望表格上方的信息滚动到页面之外。

当我的<table>高度超过容器时,容器将获得滚动条,而不是<table>本身。这会将信息滚动到页面上方的表格上方。

局限性:

我正在使用<table>元素,并且不想使用<div> display: table方法。

我也希望这是动态的,而不是将高度设置为硬像素数。

HTML:

<div class="demo-container">
  <div class="demo-header">Don't scroll me off the page please</div>
  <div class="demo-container>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>Table Header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Rows are populated via API and will expand the table height</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


CSS:

.demo-container {
  height: 100%
  display: grid;
  grid-area: body;
  grid-template-areas:
      'demo-header'
      'demo-container';
  grid-template-rows: 60px 1fr;
}

.demo-header {grid-area: demo-header;}
.demo-container {grid-area: demo-container;}

.table-container {
  height: 100%
  overflow-y: auto;
}


我知道,如果将.table-container的高度设置为像素,并设置overflow-y: auto,则可以实现所需的外观。

但是,我不想使用像素高度来执行此操作,并且希望在页面上发生更改时提供更灵敏的解决方案。没有确切的像素高度,有没有办法做到这一点?

谢谢

最佳答案

这就是您可能要做的事情。如何设置外部元素取决于您的整体页面结构。



html,
body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

.demo-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.demo-header {
    flex: none;
}

.table-container {
    overflow: auto;
}

table {
    background: pink;
}

td {
    padding: 15px;
    border: 1px solid #fff;
}

<div class="demo-container">
    <div class="demo-header">Don't scroll me off the page please</div>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Table Header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
                <tr>
                    <td>Pretend that this expands the table height past the container</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

关于html - 如何使表格填充父div高度但不超过,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58825934/

10-11 12:39
查看更多