我有一张大桌子,它位于两个粘性div(页眉和页脚)之间的可调整大小的浮动div中。
但是,当此表溢出时,滚动将坐在父浮动div上,而不是div本身,当我水平滚动时,它会弄乱粘性div。
示例:
这当然可以通过将表设置为固定的宽度/高度来工作,但由于它位于可调整大小的div中,因此我需要将其设为自动。
我该如何进行这项工作?基本上,我希望表div具有滚动而不是其父级,例如此出色的绘制编辑:
当然要保持自动调整大小。
页眉/页脚不应水平滚动。
这是小提琴:https://jsfiddle.net/ppgab/nhy02w3v/18/
HTML:
<div class="floating-middle">
<div class="sticky sticky-top">
I'm a sticky header
</div>
<div class="table-wrapper">
<table>
<thead>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</thead>
<tbody>
...
</tbody>
</table>
</div>
<div class="sticky sticky-bottom">
I'm a sticky footer
</div>
</div>
CSS:
body{
display: flex;
width : 100vw;
height: 100vh;
justify-content: center;
text-align: center;
flex-direction: column;
}
.floating-middle{
align-self : center;
width : 200px;
height : 200px;
border: 1px solid black;
resize: both;
overflow: auto;
}
.sticky-top{
position: sticky;
top: 0;
border-bottom: 1px solid black;
}
.sticky-bottom{
position: sticky;
bottom: 0;
border-top: 1px solid black;
}
.sticky{
background: red;
color: white;
}
table{
width: 100%;
overflow: auto;
}
答案 0 :(得分:0)
答案 1 :(得分:0)
您可以将overflow:auto
设置为table-wrapper
类,以便表的滚动仅限于table-wrapper
div。
您可以检入提琴here