Estoy usando React, Node, Express, Postgres para completar una tabla con datos tomados de Postgres. El problema es que la tabla es muy larga, así que lo ideal sería mostrar solo 5 filas y agregar una barra de desplazamiento a la tabla.

Mi tabla en React:

 return <Fragment> <div id="ListContactTable"> <table className="table mt-5" id="ListContactTable"> <thead> <tr> <th>Supplier Name</th> <th>Contact Name</th> <th>Job Title</th> <th>Edit Entry</th> <th>Delete Entry</th> </tr> </thead> <tbody> {contacts.map(contact => ( <tr key={contact.scontact_id}> <td>{contact.supplier_name}</td> <td>{contact.scontact_name}</td> <td>{contact.scontact_title}</td> <td><EditContact contact={contact} getContact={getContact}/></td> <td><button className="btn btn-danger" onClick={()=> deleteContact(contact.scontact_id)}>Delete</button></td> </tr> ))} </tbody> </table> </div> </Fragment>

Intenté usar css tanto en la tabla como en el div en el que está colocado para tratar de limitar la altura de la tabla, pero no funcionó:

 .modal-body{ overflow-y:scroll; max-height: 300px; } #ListContactTable{ height: 300px; } .modal-dialog { width: 600px; } .modal-footer { border-top: 0 none; }

Entonces, ¿cómo haría para limitar el tamaño de visualización de la tabla y agregarle una barra de desplazamiento?

Solución Solo tuve que agregar esto a mi tabla:

 table { table-layout:fixed; width:100%; }