Tengo una página web que muestra una tabla y un pie de página. Uso bootstrap para asegurarme de que el pie de página siempre se muestre, pero la tabla cambia de tamaño a la altura restante de la pantalla.
La resistencia funciona muy bien siempre que la ventana sea más grande que la tabla, pero cuando la ventana se vuelve demasiado pequeña, quiero mostrar una barra de desplazamiento en mi mesa pero aún así mostrar mi pie de página.
video del problema: https://www.youtube.com/watch?v=p3TPqvivW_8 mi código:
<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>Crea una clase personalizada:
.scrollable{ overflow-y: auto; } y agréguelo a su contenedor div que envuelve la tabla:
<div className="row scrollable justify-content-center bg-blue flex-grow-1 flex-nowrap"> <table>...</table> </div>