Currently using a combination of React, Node, Express, and Postgres to populate a table with data retrieved from Postgres. The issue arises when the table becomes overly long, prompting the need to display only 5 rows at once while adding a scroll bar for easier navigation.
Below is my React table structure:
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>
Attempts have been made utilizing CSS on both the table and its containing div to constrain the height and incorporate a scrollbar, though unsuccessful so far:
.modal-body{
overflow-y:scroll;
max-height: 300px;
}
#ListContactTable{
height: 300px;
}
.modal-dialog {
width: 600px;
}
.modal-footer {
border-top: 0 none;
}
Seeking advice on effectively limiting the table's display size and integrating a scrollbar:
Solution Incorporating this styling adjustment specifically to the table resolved the issue:
table
{
table-layout:fixed;
width:100%;
}