i have a webpage that shows a table and a footer. I use bootstrap to make sure that the footer is always shown but the table resizes to the remaining height of the screen.
The resising works great as long as the window is larger than the table, but when the window gets too small i want to show a scrollbar at my table but still show my footer.
video of the issue : https://www.youtube.com/watch?v=p3TPqvivW_8 my code :
<div>
<div className="container-fluid aaa">
<div className="row justify-content-center min-vh-100">
<div>
<div className="d-flex flex-column h-100">
<div className="row justify-content-center bg-blue flex-grow-1 flex-nowrap">
<table className="table table-bordered table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">IP</th>
</tr>
</thead>
<tbody>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
</tbody>
</table>
</div>
<div className="row justify-content-center bg-purple">
<div className="text-white">
<Footer />
</div>
</div>
</div>
</div>
</div>
</div>
</div>Create a custom class:
.scrollable{
overflow-y: auto;
}
and add it to your div container wrapping the table:
<div className="row scrollable justify-content-center bg-blue flex-grow-1 flex-nowrap">
<table>...</table>
</div>