Im using React, Node, Express, Postgres to populate a table with data taken from postgres. The problem is the table is very long, so ideally I want to only display 5 rows and add a scroll bar to the table.

My table in 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>

I have tried using css on both the table and the div it's placed in to try and limit the table height, but it didn't work out:

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

So how would I go about limiting the display size of the table, and adding a scrollbar to it?

Solution Just had to add this to my table:

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