表格最大高度作为父级div-带有滚动条

时间:2019-01-17 10:02:13

标签: html css

enter image description here

从图像中可以看到,我正在主要使用flexboxes构建HTML页面。
但是,我发现很难使HTML“表格”在高度上显示滚动条。

  • 点缀紫红色的元素是“桌子”
  • 点缀绿松石的元素是“ paginator”

这两个元素包含在div中。
div本身包含在flexbox

div#job-table {
   display: flex;
   flex-direction: column;
   border: 2px solid black;

   table {
      margin: 5px;
      border: 2px dotted fuchsia;
   }

   mat-paginator {
      margin: 5px;
      border: 2px dotted turquoise;
   }
}

我想要获得的是“表格”,用于在内容溢出时显示垂直滚动条,而“分页器”应始终固定在其容器divjob-table的底部

HTML如下(由于使用Angular Material构建,因此我省略了一些细节)

<div id="job-table">
    <!-- Main table -->
    <table
        mat-table
        multiTemplateDataRows
    > ...
    </table>

    <!-- Pagination -->
    <mat-paginator
      ...
    ></mat-paginator>
</div>

编辑:我尝试将表包含在div中,结果相同

div#job-table {
   display: flex;
   flex-direction: column;
   border: 2px solid black;

   #test-wrapper {
      flex: 1;
      overflow: auto;
      border: 2px solid greenyellow;

      table {
         width: 100%;
         border: 2px dotted fuchsia;
      }
   }

   mat-paginator {
      border: 2px dotted turquoise;
   }
}

2 个答案:

答案 0 :(得分:0)

将表放入容器中,并为其增加一定的高度,然后添加overflowY:scroll。谢谢。

答案 1 :(得分:0)

table元素从official documentation开始没有溢出属性,因此您必须将其包含在div中,该div可以包含overflowY: auto(仅在必要时显示滚动。

需要正确配置div以适应包含的表。在尝试flexbox时,我通常会从this playground获得帮助。