从图像中可以看到,我正在主要使用flexboxes
构建HTML页面。
但是,我发现很难使HTML“表格”在高度上显示滚动条。
这两个元素包含在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;
}
}
我想要获得的是“表格”,用于在内容溢出时显示垂直滚动条,而“分页器”应始终固定在其容器div
,job-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;
}
}
答案 0 :(得分:0)
将表放入容器中,并为其增加一定的高度,然后添加overflowY:scroll
。谢谢。
答案 1 :(得分:0)
table元素从official documentation开始没有溢出属性,因此您必须将其包含在div中,该div可以包含overflowY: auto
(仅在必要时显示滚动。>
需要正确配置div以适应包含的表。在尝试flexbox时,我通常会从this playground获得帮助。